微信小程序自定義tabBar的步驟記錄

Posted on by

1、前言

很多時候，小程序自帶的tabBar不能夠滿足項目需求，這個時候就需要我們自定義tabBar瞭。但是在網上找瞭很久，基本都是存在切換時閃爍的問題。幸運的是從基礎庫2.5.0開始，可以官方使用自定義tabBar瞭。

2、自定義tabBar樣式

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

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

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

3.2、在app.json中配置好切換的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' &&
      this.getTabBar()) {
      console.log('設置選中項 0')
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

4、完整Demo

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

總結

到此這篇關於微信小程序如何自定義tabBar的文章就介紹到這瞭,更多相關小程序自定義tabBar內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：