微信小程序中动态设置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隐藏而已，闪动问题自然就没有了！