自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。
首先 从 **在开发者工具中预览效果 ** 点击获取custom-tab-bar组件代码,然后开始修bug
app.json 中配置 custom , app.json中全局声明 usingComponents
运行代码之后会发现:
tabbar图标切换 要点击两次才能有选中状态
解决办法:
- 打开 custom-tab-bar 文件夹下的 index.wxml ,在 van-tabbar (结合 vant-weapp使用的)
<van-tabbar bind:change="switchTab">
绑定监听事件 switchTab
- 打开 custom-tab-bar 文件夹下的 index.js , 获取到当前切换到的页面 在tabbar 中的 索引下标
methods: {
switchTab(e) {
getApp().globalData.activeIdx = e.detail
wx.switchTab({
url: '/' + this.data.list[e.detail].pagePath
})
}
}
- 为了方便在其他页面获取共享值 activeIdx , 在项目根目录下 app.js 文件中添加
globalData: {
activeIdx: 0
}
- 在每个tab 切换页面 的 onShow 时候再设置 下 activeIdx
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
activeIdx: 0
})
}
}
- 重新编译后即解决此bug