在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
项目中需要根据用户角色控制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。 问题解决,切换时不再有“飞出去”的感觉
|
请发表评论