自定义tabBar切换时闪烁?
发布于 5 年前 作者 dyao 5029 次浏览 来自 问答

自定义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)

}

}

})

3 回复

看一下官方示例代码,tabbar页面onshow引入

    if (typeof this.getTabBar === ‘function’ && this.getTabBar()) {

      this.getTabBar().setData({

        selected: 0

      })

    }

你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

回到顶部