微信小程序—tabBar底部导航中文注解api

￡神魔★判官ぃ 2022-06-10 07:55 246阅读 0赞

[微信小程序][Link 1]tabBar底部导航中文注解api，信小程序tabBar就是app底部的那个导航栏，可以放1-5导航链接，这里对微信小程序底部导航tabbar的中文解释。  
**微信小程序**tabBar是在全局app.json文件里面配置的。

## 小程序tabBar配置代码注解 ##

{
        "pages":[
            "pages/index/index",
            "pages/detail/detail"
        ],
        "window":{
            "navigationBarTitleText": "TabBar",
            "navigationBarBackgroundColor": "#F60",
            "navigationBarTextStyle": "white"
        },
    
        //tabBar注意是B是大写，有朋友提问运行时tab没出现，检查是不是这里手误
        "tabBar":{
    
        //文档指出color是必填项，其实可为空，不重写color就是深灰，样式更统一
            "color": "#ddd",
    
       //同样，文档指出selectedColor是必填项，不过selectedColor有必要重写，区分当前项与普通项
            "selectedColor": "#3cc51f",
    
       //同样，文档指出color是必填项，其实可为空，不重写backgroundColor就是浅灰，样式更统一。
            "backgroundColor": "#fff",
    
       //borderStyle，不写默认就是黑，那就黑好了，white的话，会少一条分隔线，跟页面混在一起了
            "borderStyle":"black",
            "list":[{
                    "pagePath":"pages/index/index",
    
       //iconPath图标是非必填，只是tab栏会变矮，自然selectedIconPath也可不写
                    "iconPath":"image/icon_API.png",
                    "selectedIconPath":"image/icon_API_HL.png",
                    "text":"index"
                },{
                    "pagePath":"pages/detail/detail",
                    "iconPath":"image/icon_component.png",
                    "selectedIconPath":"image/icon_component_HL.png",
                    "text":"detail"
                }]
        }
    }

## 小程序tabBar参数说明 ##

如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <th style="">属性</th> 
   <th style="">类型</th> 
   <th style="">必填</th> 
   <th style="">默认值</th> 
   <th style="">描述</th> 
  </tr> 
 </tbody> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">color</td> 
   <td style="">HexColor</td> 
   <td style="">是</td> 
   <td style="">&nbsp;</td> 
   <td style="">tab 上的文字默认颜色</td> 
  </tr> 
  <tr style=""> 
   <td style="">selectedColor</td> 
   <td style="">HexColor</td> 
   <td style="">是</td> 
   <td style="">&nbsp;</td> 
   <td style="">tab 上的文字选中时的颜色</td> 
  </tr> 
  <tr style=""> 
   <td style="">backgroundColor</td> 
   <td style="">HexColor</td> 
   <td style="">是</td> 
   <td style="">&nbsp;</td> 
   <td style="">tab 的背景色</td> 
  </tr> 
  <tr style=""> 
   <td style="">borderStyle</td> 
   <td style="">String</td> 
   <td style="">否</td> 
   <td style="">black</td> 
   <td style="">tabbar上边框的颜色， 仅支持 black/white</td> 
  </tr> 
  <tr style=""> 
   <td style="">list</td> 
   <td style="">Array</td> 
   <td style="">是</td> 
   <td style="">&nbsp;</td> 
   <td style="">tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td> 
  </tr> 
  <tr style=""> 
   <td style="">position</td> 
   <td style="">String</td> 
   <td style="">否</td> 
   <td style="">bottom</td> 
   <td style="">可选值 bottom、top</td> 
  </tr> 
 </tbody> 
</table>

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <th style="">属性</th> 
   <th style="">类型</th> 
   <th style="">必填</th> 
   <th style="">说明</th> 
  </tr> 
 </tbody> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">pagePath</td> 
   <td style="">String</td> 
   <td style="">是</td> 
   <td style="">页面路径，必须在 pages 中先定义</td> 
  </tr> 
  <tr style=""> 
   <td style="">text</td> 
   <td style="">String</td> 
   <td style="">是</td> 
   <td style="">tab 上按钮文字</td> 
  </tr> 
  <tr style=""> 
   <td style="">iconPath</td> 
   <td style="">String</td> 
   <td style="">是</td> 
   <td style="">图片路径，icon 大小限制为40kb</td> 
  </tr> 
  <tr style=""> 
   <td style="">selectedIconPath</td> 
   <td style="">String</td> 
   <td style="">是</td> 
   <td style="">选中时的图片路径，icon 大小限制为40kb</td> 
  </tr> 
 </tbody> 
</table>

![微信小程序tabBar底部导航中文注解api][tabBar_api]

[Link 1]: http://xcx9.cn/
[tabBar_api]: https://mp.weixin.qq.com/debug/wxadoc/dev/image/tabbar.png?t=20161122