自定义tabBar跳转问题,点击订单,页面跳到了订单页,但是个人中心图标却是被选中状态。
.xml
<cover-view class="tab-bar" style='height:{{isIphoneX?166:120}}rpx;'>
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image class='cover-image' src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
.js
const app = getApp();
Component({
data: {
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
pagePath: "/pages/index/index",
iconPath: "/pages/images/menuicon/index_off.png",
selectedIconPath: "/pages/images/menuicon/index_on.png",
text: "首页",
}, {
pagePath: "/pages/order/order/order",
iconPath: "/pages/images/menuicon/order_off.png",
selectedIconPath: "/pages/images/menuicon/order_on.png",
text: "订单",
}, {
pagePath: "/pages/user/user",
iconPath: "/pages/images/menuicon/user_off.png",
selectedIconPath: "/pages/images/menuicon/user_on.png",
text: "个人",
}],
//适配IphoneX的屏幕底部横线
isIphoneX: app.globalData.isIphoneX
},
// attached() {},
methods: {
switchTab(e) {
var dataset = e.currentTarget.dataset
console.log(dataset);
var path = dataset.path
var index = dataset.index
wx.switchTab({
url: path
})
this.setData({
selected: index
})
console.log(this.data.selected)
}
}
})
看一下官方示例代码,tabbar页面onshow引入
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
https://developers.weixin.qq.com/community/develop/doc/000c84de0cc590bbe54b97edf5e414
不要担心,你不是一个人