微信小程式自定義tabbar圖示切換點選兩次才選中解決方法

來了老弟發表於2023-01-13
微信小程式tabBar
微信小程式開發過程中使用了自定義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。

相關文章