微信小程序自定义tabbar图标切换点击两次才选中解决方法

来了老弟来了老弟 - 2023-01-16 20:10:15

---

微信小程序开发过程中使用了自定义tabBar，运行官网提供的demo是没有问题的，但是自己添加了新的tab-item后点击会出现错误，具体表现为：点击一次tab跳到指定的页面，但是tabBar的状态还停留在上一个，再次点击才能更新。问题分析

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "接口"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

在methods的switchTab()方法中看似在切换tab后更新了当前选中的tab，但是这样是不够的，可以查看对应页面的show()中官方还添加了下面的代码：

// 组件页面
show() {
  if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0
    })
  }
}

// 接口页面
show() {
  if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: 1
    })
  }
}

我们自己新添加的页面正是应为缺少了这段代码，才会出现开始提到的问题。在新增的页面添加即可解决，注意你的selected值应该是tabBar数组中对应的index。

Tags 标签

微信小程序自定义控件

扩展阅读