微信小程序底部为什么不识别bottom

在微信小程序中，底部导航栏为何不识别 "bottom" 属性？

微信小程序的底部导航栏主要通过配置 app.json 文件来实现，而 bottom 属性在微信小程序中并未被识别。这是因为微信小程序的底部导航栏遵循了一套固定的设计规范，与原生 APP 有所不同。

在微信小程序中，底部导航栏的实现方式如下：

• 在 app.json 文件中，使用 tabBar 属性配置底部导航栏。例如：

<json> <tabBar> <color>#999</color> <selectedColor>#333</selectedColor> <list> <pagePath>/pages/index/index</pagePath> <text>首页</text> <iconPath>/images/tabbar/home.png</iconPath> <selectedIconPath>/images/tabbar/homeactive.png</selectedIconPath> </list> </tabBar> </json>

而在需要显示顶部导航栏的页面中，需要在 wxml 文件中添加一个 view 元素，并设置其高度和背景色等样式信息。例如：

         
<view  class="c52e-7334-aafd-a073 nav-bar">
             <view  class="7334-aafd-a073-4dfe nav-bar-title">
标题</view>
         </view>
     
     

然后，在 wxss 文件中进行样式定义。例如：

         
.nav-bar  {
             height:  50px;
             background-color:  #fff;
             position:  fixed;
              top:  0;
             left:  0;
             right:  0;
             z-index:  9;
             border-bottom:  solid  #e5e5e5  1px;
             box-shadow:  rgba(0,  0,  0,  0.05)  2px  2px  6px;
         }
         .nav-bar-title  {
              text-align:  center;
             font-size:  36px;
             height:  50px;
             line-height:  50px;
         }
     
     

最后，通过小程序 API 获取状态栏高度和导航栏高度，并传递给视图层。例如：

         
data:  {
             statusBarHeight:  WXEnvironment.statusBarHeight,
             navViewHeight:  wx.getMenuButtonBoundingClientRect().height(wx.getMenuButtonBoundingClientRect().top2)
         }
     
     

通过以上方法，就可以在微信小程序中实现顶部和底部导航栏的效果。需要注意的是，微信小程序的底部导航栏并不识别 bottom 属性，而是通过固定的设计规范来实现。因此，在开发过程中，需要遵循这套规范来设计底部导航栏。