• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序自定义TabBar

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

项目中需要根据用户角色控制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。

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序基础(二)发布时间:2022-07-18
下一篇:
微信小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap