目錄

• 1、前言
  
• 2、自定義tabBar樣式
  
• 3、引入custom-tab-bar及相關配置
• 4、完整Demo
• 總結

1、前言

很多時候，小程式自帶的tabBar不能夠滿足專案需求，這個時候就需要我們自定義tabBar了。anQzNXIkVX但是在網上找了很久，基本都是存在切換時閃爍的問題。幸運的是從基礎庫2.5.0開始，可以官方使用自http://www.cppcns.com定義tabBar了。

2、自定義tabBar樣式

如下圖所示，我們需要一個展示“首頁”、“我的”，和一個可以點選跳轉到釋出的tabBar。這種樣式，原生的就無法滿足需求了，只能自定義tabBar了。

3、引入custom-tab-bar及相關配置

3.1、如下圖所示，將custom-tab-bar【下載】匯入專案根目錄，

3.2、在app.on中配置好切換的tabbar，並設定"custom": true，然後將基礎庫設定成2.5.0

3.3、使用自定義TabBar，在切換的TabBar介面的onShow中新增如下程式碼。如首頁中設定 selected: 0，我的中設定 selected: 2。因為 selected: 1 是特殊跳轉，點選加號圖示時，不再是切換tabbar，而是直接跳轉發布介面了。

/**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &anQzNXIkVX
 
&
      this.getTabBar()) {
      console.log('設定選中項 0')
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

4、完整Demo

真機測試可用，使用也非常的簡單。【完整Demo下載地址】

總結

到此這篇關於微信小程式如何自定義tabBar的文章就介紹到這了,更多相關小程式自定義tabBar內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！