微信小程式底部實現自定義動態Tabbar

Java小學生丶發表於2021-04-30
微信小程式tabBar

多圖警告！！！

最近在工作中遇到這樣一個需求：微信小程式底部的Tab需要通過判斷登入人的角色動態進行改變，想要實現這個功能依靠小程式原生的Tabbar是不可能實現的了，所以研究了一下自定義Tab，這裡記錄一下

微信小程式的Tab

想要寫自定義Tab首先要知道原生Tab該怎麼寫，新建一個微信小程式執行起來，預設是這個樣子的

簡單修改一下小程式自帶的logs頁面，大概是這個樣子（通過兩個按鈕模擬角色，就不寫登入了）

目前想要在兩個頁面之前來回切換隻能通過修改app.json中pages的順序才能實現，所以我們需要底部的Tab，官方文件 中對Tab的使用有詳細介紹，我這裡選擇在app.json中新增tabBar實現：

// app.json檔案中pages同級的位置增加tabBar來配置底部Tab
"tabBar": {
  // 文字預設顏色
  "color": "#5F5F5F",
  // 文字選中顏色
  "selectedColor": "#027FF5",
  // Tab背景顏色
  "backgroundColor": "#F7F7F7",
  // Tab列表
  "list": [{
      // Tab預設圖示
      "iconPath": "/images/footer-01.png",
      // Tab選中圖示
      "selectedIconPath": "/images/footer-01-h.png",
      // Tab跳轉的目標路徑，參考上面的pages屬性即可
      "pagePath": "pages/index/index",
      // Tab底部顯示的文字
      "text": "首頁"
    }, {
      "iconPath": "/images/footer-03.png",
      "selectedIconPath": "/images/footer-03-h.png",
      "pagePath": "pages/logs/logs",
      "text": "測試頁"
  }]
},

這樣一來就可以通過點選底部Tab來切換顯示頁面了，這就是微信小程式的Tab

自定義Tab

針對自定義Tab 官方文件 中也有詳細說明，需要在根目錄建立一個元件(Component)，名稱要固定寫好：

然後在app.json中找到之前新增的tabBar屬性，在他下面新增這樣一個屬性：

之後就會發現底部Tab已經變成了剛剛建立的元件，接下來就開始繪製Tab頁

官方建議繪製Tab時最好使用cover-view + cover-image標籤搭配flex佈局，保證Tab層級較高

這樣一來自定義的Tab就已經成功了一半了，接下來就要結合JS讓他稱為真正的Tab，為了讓自定義Tab使用起來更順手，這裡按照app.json的tab格式將配置貼上到JS檔案中，然後修改下wxml讓頁面資料變成動態的，這樣Tab列表的功能就完成了！

然後要實現Tab點選切換頁面的核心功能，我們在每個Tab上新增一個點選事件，然後將需要跳轉的目標路徑傳入到跳轉方法中，然後頁面跳轉就實現了

接下來實現的是頁面Tab高亮，之前在wxml中已經寫了根據index判斷的條件，接下來只需要在訪問頁面時記錄tabIndex就沒問題了

這樣乍一看的確實現了高亮的效果，但是當仔細觀察後就會發現，只有在第二次點選的時候高亮才會同步過去，Tab更新不及時，所以這裡不能採取這種方法，應該讓頁面來決定那個Tab應該高亮，將switchTab中的setData移除掉，分別在首頁和測試頁新增更新高亮的程式碼：

OK！這樣自定義Tab就可以正常使用了！

動態Tab實現

準備工作做的差不多了，現在開始實現動態Tab，鑑於在之前設定高亮的時候發現了Tab中資料更新不及時的問題，以及每個Page的onShow中都會呼叫重複程式碼，這裡決定書寫一個服務將Tab常用操作都封裝進去，在utils資料夾下新建tab-service.js，跟Tab相關的東西都放到這個下面：

// Tab頁的data
let tabData = {
    tabIndex: 0,
    tabBar: {
        custom: true,
        color: "#5F5F5F",
        selectedColor: "#027FF5",
        backgroundColor: "#F7F7F7",
        list: [{
            iconPath: "/images/footer-01.png",
            selectedIconPath: "/images/footer-01-h.png",
            pagePath: "pages/index/index",
            text: "首頁"
        }, {
            iconPath: "/images/footer-03.png",
            selectedIconPath: "/images/footer-03-h.png",
            pagePath: "pages/logs/logs",
            text: "測試頁"
        }]
    }
}

// 更新角色
const updateRole = (that, role) => {
    tabData.tabBar.list[0].text = role + "首頁";
    updateTab(that);
}

// 更新底部高亮
const updateIndex = (that, index) => {
    tabData.tabIndex = index;
    updateTab(that);
}

// 更新Tab狀態
const updateTab = (that) => {
    if (typeof that.getTabBar === 'function' && that.getTabBar()) {
        that.getTabBar().setData(tabData);
    }
}

// 將可呼叫的方法丟擲讓外面呼叫
module.exports = {
    updateRole, updateTab, updateIndex
}

之前說了那麼多，這裡動態Tab細節就不多說了，點選下載程式碼 看看就懂了

相關文章