微信小程序自定义tabBar时图标选中问题
在使用自定义tabBar时要在目标目录的onShow函数中写入一段判断代码,否则图标的选中就会发生异常
自定义tabBar参考官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
在custom-tab-bar目录中js文件:
Component({
data: {
active: 0,
list:[
{
path:"/pages/index1/index1",
icon:"home-o",
text:"首页"
},
{
path: "/pages/chat/chat",
icon: "apps-o",
text: "分类"
},
{
path: "/pages/mine/mine",
icon: "setting-o",
text: "我的"
}
]
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
active: data.index
})
console.log(this)
}
}
})
则要在上述中的path:
/pages/index1/index1
/pages/chat/chat
/pages/mine/mine
的js文件中的onShow函数中加入以下代码条件判断图标是否选中
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
active: 1 //这个数字是当前页面在tabBar中list数组的索引
})
}
},
加入后图标选中正常