收藏
回答

自定义tabBar切换时闪烁?

自定义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 个回答

  • destiny
    destiny
    2021-05-14

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

        if (typeof this.getTabBar === 'function' && this.getTabBar()) {

          this.getTabBar().setData({

            selected: 0

          })

        }

    2021-05-14
    有用 2
    回复 4
    • chen
      chen
      发表于移动端
      2021-05-14
      我这边主要是跳转页面,和显示选中图标不一致
      2021-05-14
      回复
    • destiny
      destiny
      2021-05-14回复chen
      是的啊,你在自定义组件里面不需要setData  selected的值,而是在首页、订单、个人中心三个页面的onShow里面setData selected的值分别为0、1、2
      2021-05-14
      回复
    • chen
      chen
      2021-05-15回复destiny
      意思在首页,订单页, 个人中心页都需要引用吗?大佬this.getTabBar()这个是怎么用了。小白求指教
      2021-05-15
      回复
    • chen
      chen
      2021-05-15回复destiny
      晓得了谢谢
      2021-05-15
      回复
  • Cjiang
    Cjiang
    2021-05-14

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

    2021-05-14
    有用
    回复 2
    • chen
      chen
      2021-05-14
      是开发者工具。代码提问题那块已经提供
      2021-05-14
      回复
    • Cjiang
      Cjiang
      2021-05-17回复chen
      需要提供代码片段方便核实。
      2021-05-17
      回复
  • MORNINGSTART(tiezhu)
    MORNINGSTART(tiezhu)
    2021-05-14

    https://developers.weixin.qq.com/community/develop/doc/000c84de0cc590bbe54b97edf5e414

    不要担心,你不是一个人

    2021-05-14
    有用
    回复
登录 后发表内容