微信小程序中動態設置TabBar並解決閃動問題

最近接到一個需求用戶在登錄微信小程序時需要根據角色顯示不同的tabbar內容，解決思路大致如下：

• 創建自定義TabBar的模板tabbar.wxml，本例放置在pages目錄下創建的template文件夾中

<template name="tabBar">
  <view class="tabbar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1rpx '+tabBar.borderStyle + ';') : ''}}">
    <block wx:for="{{tabBar.list}}" wx:key="pagePath">
      <navigator url="{{item.pagePath}}" open-type="switchTab" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
        <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="tabbar-icon"></image>
        <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="tabbar-icon"></image>
        <text class='tabbar-text'>{{item.text}}</text>
      </navigator>
    </block>
  </view>
</template>

• 在app.js中添加如下兩項

// 自定義顯示tabbar
  onTabBar: function(key) {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.tabBarData[key];
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true; // 根據頁面地址設置當前頁面狀態    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },
  tabBarData: {
    userInfo: null,
    pop: 2,
    num: 0,
    user: {
      "color": "#dbdbdb",
      "selectedColor": "#1296db",
      "backgroundColor": "white",
      "borderStyle": "white",
      "position": "bottom",
      "list": [
        {
          "pagePath": "/pages/message/message",
          "text": "消息",
          "iconPath": "/pages/images/icon/static/inform.png",
          "selectedIconPath": "/pages/images/icon/active/inform.png",
          "clas": "tabbar-item",
          "active": true
        },
        {
          "pagePath": "/pages/list/list",
          "text": "列表",
          "iconPath": "/pages/images/icon/static/list.png",
          "selectedIconPath": "/pages/images/icon/active/list.png",
          "clas": "tabbar-item",
          "active": false
        },
        {
          "pagePath": "/pages/user/user",
          "text": "我的",
          "iconPath": "/pages/images/icon/static/user.png",
          "selectedIconPath": "/pages/images/icon/active/user.png",
          "clas": "tabbar-item",
          "active": false
        }
      ]
    },
    staff: {
      "color": "#dbdbdb",
      "selectedColor": "#1296db",
      "backgroundColor": "white",
      "borderStyle": "white",
      "position": "bottom",
      "list": [
        {
          "pagePath": "/pages/message/message",
          "text": "消息",
          "iconPath": "/pages/images/icon/static/inform.png",
          "selectedIconPath": "/pages/images/icon/active/inform.png",
          "clas": "tabbar-item",
          "active": true
        },
        {
          "pagePath": "/pages/user/user",
          "text": "我的",
          "iconPath": "/pages/images/icon/static/user.png",
          "selectedIconPath": "/pages/images/icon/active/user.png",
          "clas": "tabbar-item",
          "active": false
        }
      ]
    }
  }

• 在app.wxss中添加自定義TabBar的樣式

/*  自定義tabbar樣式*/

.tabbar {
  display: flex;
  flex-direction: row;
  position: fixed;
  width: 100%;
}

.tabbar-item {
  flex-grow: 1;
  padding: 6rpx 0;
  text-align: center;
}

.tabbar-icon {
  width: 46rpx;
  height: 46rpx;
  display: block;
  margin: 0 auto;
}

.tabbar-text {
  font-size: 24rpx;
}

至此基本的代碼搬運工作已經基本完成，爲了解決閃動問題，我並沒有放棄使用微信自帶的tabbar，所以在示例的app.json中需要配置所有的tabbar頁面。

"tabBar": {
    "color": "#dbdbdb",
    "selectedColor": "#1296db",
    "backgroundColor": "white",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/pages/images/icon/static/inform.png",
        "selectedIconPath": "/pages/images/icon/active/inform.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "列表",
        "iconPath": "/pages/images/icon/static/list.png",
        "selectedIconPath": "/pages/images/icon/active/list.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/pages/images/icon/static/user.png",
        "selectedIconPath": "/pages/images/icon/active/user.png"
      }
    ]
  },

• 在具有tabbar的頁面中我們可以在頁面的onShow事件中添加如下代碼

wx.hideTabBar({
    success: function() {
       app.onTabBar('user');
    }
})

注意：這裏的傳入的參數user往往由登錄時的角色判斷獲取，本例如果改爲staff則呈現不同效果，app由const app = getApp()獲取

• 在相應的wxml頁面添加

<import src="../template/tabbar.wxml"/>
......頁面內容
<template is="tabBar" data="{{tabBar:tabBar}}"></template>

點擊我們的自定義TabBar時，實際還是調用的微信自帶的tabbar的跳轉，只是將它自帶的tabbar隱藏而已，閃動問題自然就沒有了！