微信小程序自定义TabBar
项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个。
1、wxml文件
<view class="weui-flex tab-bar" 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}}" 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。
问题解决,切换时不再有“飞出去”的感觉