基於Vant Weapp 微信小程式自定義TabBar

根據微信小程式 官方文件 關於自定義TabBar的說明中進行操作。

步驟

1. app.json 新增關於 TabBar 的內容

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "實時"
      },
      {
        "pagePath"
 
: "pages/dynamic/dynamic",
        "text": "動態"
      },
      {
        "pagePath": "pages/release/release",
        "text": "釋出"
      },
      {
        "pagePath": "pages/massage/massage",
        "text"
 
: "訊息"
      },
      {
        "pagePath": "pages/user/user",
        "text": "實時"
      }
    ]
  },

2. 在小程式的根路徑下建立 custom-tab-bar這個資料夾

官網描述
在程式碼根目錄下新增入口檔案:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
 

3. custom-tab-bar 中需要的程式碼

3.1 index.json

{
  "component": true,
  "usingComponents": {
    "van-tabbar": "/miniprogram_npm/@vant/weapp/tabbar/index",
    "van-tabbar-item": "/miniprogram_npm/@vant/weapp/tabbar-item/index"
  }
}

3.2 index.wxml

  <van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item  icon="live">實時</van-tabbar-item>
    <van-tabbar-item  icon="photo">動態</van-tabbar-item>
    <van-tabbar-item  icon="invition">釋出</van-tabbar-item>
    <van-tabbar-item  icon="chat">訊息</van-tabbar-item>
    <van-tabbar-item  icon="manager">我的</van-tabbar-item>
  </van-tabbar>

3.3 index.js

// custom-tab-bar/index.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {

  },

  /**
   * 元件的初始資料
   */
  data: {
    active: null,
    "list": [
      {
        "pagePath": "/pages/index/index"
      },
      {
        "pagePath": "/pages/dynamic/dynamic"
      },
      {
        "pagePath": "/pages/release/release"
      },
      {
        "pagePath": "/pages/massage/massage"
      },
      {
        "pagePath": "/pages/user/user"
      }
    ]
  },

  /**
   * 元件的方法列表
   */
  methods: {
    onChange:function(event){
      // console.log(event.detail);
      const index = event.detail;

      // 在這裡設定active會造成閃爍
      // this.setData({
      //   active: event.detail
      // });
      wx.switchTab({
        url: this.data.list[index].pagePath
      })
    }
  }
})

在每個TabBar頁面設定 active

以index.js (首頁) 為例

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    this.getTabBar().setData({
      active : 0 
    })
  },

這裡的 active 設定的值對應當前 TabBar頁面的序號，這樣就可以避免掉點選TabBar時會因為渲染問題造成的圖示閃爍問題。