官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
1.在app.json中添加如下
{
"tabBar": {
// 添加custom:true,不删除原本list目录,保证低版本可以正常运行
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
},
"usingComponents": {}
}
2.添加 tabBar 代码文件
在代码根目录下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
3.编写 tabBar 代码
用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例
4.保留list后,也可将list粘贴到.js文件循环渲染到页面
5.解决tabber栏图标索引出错的bug
- 将data中的active删除
- 将active绑定到store中(tabBerIndex)
- 在store中创建tabBerIndex,并创建对应的actions方法来修改tabBerIndex值
- 组件标签中的 active="{{ tabBerIndex }}" 修改为store中的
- onChange方法中使用 this.changeTabBerIndex(event.detail)来修改store中的tabBerIndex值