微信小程序自定义TabBar

项目中需要根据用户角色控制TabBar中各Item的显示和隐藏，然而小程序自带TabBar没有提供隐藏某个item的功能，只好自己动手写了一个。

1、wxml文件

<view class="weui-flex tab-bar" style="color: {{color}}; background: {{backgroundColor}}; {{position=='top'? 'top: 0' : 'bottom: 0'}}; {{borderStyle? (position=='top'? 'border-bottom: solid 1px '+borderStyle + ';' : 'border-top: solid 1px '+borderStyle + ';') : ''}}">
  <block wx:for="{{list}}" wx:key="pagePath">
    <navigator url="{{item.pagePath}}" open-type="switchTab" class="weui-flex__item menu-item {{item.class}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : selectedColor) : ''}}" wx:if="{{item.hidden!==true}}">
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>
      <text class='tabbar_text'>{{item.text}}</text>
    </navigator>
  </block>
  <view class="clear"></view>
</view>

重点：通过每个item的hidden属性控制是否显示

2、js文件

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    color:{
      type:String,
      value:''
    },
    selectedColor:{
      type:String,
      value:'#1aad19'
    },
    backgroundColor:{
      type:String,
      value:''
    },
    position:{
      type:String,
      value:'bottom'
    },
    borderStyle:{
      type: String,
      value:'#ccc'
    },
    list:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

重点为list属性，定义为一个Array

3、wxss文件

@import "/style/weui.wxss";

.menu-item{
  height:100rpx;
  text-align: center;
  padding-top: 5rpx;
}
.img{
  width: 60rpx;
  height: 60rpx;
  display: block;
  margin:auto;
}
.clear{
  clear: both;
}
.tab-bar{
  position: fixed;
  width:100%
}
.tabbar_text{
  font-size: 28rpx;
  position:relative;
  top:-12rpx;
}

4、使用组件：

在app.js中定义各Tab页签，并根据角色控制是否显示：

getTabList:function(){
    var tabItemList = [
      {
        "pagePath": "/pages/asset/list",
        "text": "资产台帐",
        "iconPath": "/img/list_gray.png",
        "selectedIconPath": "/img/list_blue.png",
        "active": false
      },
      {
        "pagePath": "/pages/check/index",
        "text": "资产盘点",
        "iconPath": "/img/list_gray.png",
        "selectedIconPath": "/img/list_blue.png",
        "active": false
      },
      {
        "pagePath": "/pages/mine/index",
        "text": "个人中心",
        "iconPath": "/img/list_gray.png",
        "selectedIconPath": "/img/list_blue.png",
        "active": false
      }
    ];
    return tabItemList;
  },
  initTabBar:function(activeIdx){
    var tabItemList=this.getTabList();
    //资产台账，资产管理员可见
    tabItemList[0].hidden=!this.isADMIN();
    if(activeIdx>=0 && activeIdx<tabItemList.length){
      tabItemList[activeIdx].active=true;
    }

    return tabItemList;
  }

在页面的wxml中插入组件：

<view class="page">
  <view class="page__bd">
    <block wx:if='{{isSA}}'>
    <view class="weui-cells__title"></view>
    <view class="weui-cells weui-cells_after-title">
      <navigator url="../config/index" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <view class="weui-cell__bd">系统配置</view>
          <view class="weui-cell__ft weui-cell__ft_in-access"></view>
      </navigator>
    </view>
    </block>
    <view class="weui-cells__title"></view>
    <view class="weui-cells weui-cells_after-title">
      <navigator url="changePassword" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <view class="weui-cell__bd">修改密码</view>
          <view class="weui-cell__ft weui-cell__ft_in-access"></view>
      </navigator>
      <view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap="logout">
          <view class="weui-cell__bd">退出登录</view>
          <view class="weui-cell__ft weui-cell__ft_in-access"></view>
      </view>
    </view>
  </view>
</view>
<mfmtTabBar list="{{tabItemList}}"></mfmtTabBar>

页面js:

onShow: function () {
    //初始化主Tab标签
    var tabItemList = app.initTabBar(2);
    this.setData({ tabItemList });
  }

5、一个小问题

最初，定义组件的navigator时，使用openType="redirect"，运行起来后，切换tab时，Tabbar有瞬间飞出去的感觉，用户体验很不好。

改为openType="switchTab"，并在app.json中定义Tabbar（否则switchTab不生效）:

"tabBar": {
    "list": [
      {
        "pagePath": "pages/asset/list",
        "text": "资产台帐"
      },
      {
        "pagePath": "pages/check/index",
        "text": "资产盘点"
      },
      {
        "pagePath": "pages/mine/index",
        "text": "个人中心"
      }
    ]
  }

在app.js的onlaunch方法里调用wx.hideTabBar接口，隐藏原有TabBar。

问题解决，切换时不再有“飞出去”的感觉