微信小程序自定義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。

問題解決，切換時不再有“飛出去”的感覺