微信小程序 根据不同用户切换不同TabBar


Posted in Javascript onApril 21, 2022

现有需求:

小程序用户有三种身份(公众、运维人员、领导),根据不同用户身份显示不同的tabbar

众所周知微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个,要想实现3个tabbar,必须得复用tabbar,三种身份都需要个人中心,剩下的是长列表(两个),表单,图表 刚好是5个,废话少说,上代码

代码有点长,建议仔细看一下

1全局.app.json

tabbar里面的sustom要设置为true

"custom": true,
{
  "pages": [
    xxxxxx:xxxxxx
   
  ],
  "window": {
   xxxxxxxxx
  },
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#d81e06",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/Users/myrepaire/myrepaire",
        "text": "我要报修",
        "iconPath": "/images/tabbar/weixiu1.png",
        "selectedIconPath": "/images/tabbar/weixiu2.png"
      },
      {
        "pagePath": "pages/Users/myMalfunction/myMalfunction",
        "text": "我的故障",
        "iconPath": "/images/tabbar/myweixiu1.png",
        "selectedIconPath": "/images/tabbar/myweixiu2.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "个人中心",
        "iconPath": "/images/tabbar/user1.png",
        "selectedIconPath": "/images/tabbar/user2.png"
      },
      {
        "pagePath": "pages/weixiu/myweixiu/myweixiu",
        "text": "我的维修",
        "iconPath": "/images/tabbar/myweixiu1.png",
        "selectedIconPath": "/images/tabbar/myweixiu1.png"
      },
      {
        "pagePath": "pages/charts/charts",
        "text": "故障报表",
        "iconPath": "/images/tabbar/chart1.png",
        "selectedIconPath": "/images/tabbar/chart2.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

可以看到全局app.json里面放了5个不同的tabbar路径

2.自定义custom-tab-bar

(详见微信官方文档)

微信小程序 根据不同用户切换不同TabBar

index.js

Component({
  data: {
    selected: 0,
    color: "#000000",
    roleId: '',
    selectedColor: "#1396DB",
    allList: [{

      list1: [{
        pagePath: "/pages/Users/myrepaire/myrepaire",
        iconPath: "/images/tabbar/weixiu1.png",
        selectedIconPath: "/images/tabbar/weixiu2.png",
        text: "我要报修"
      }, {
        pagePath: "/pages/Users/myMalfunction/myMalfunction",
        iconPath: "/images/tabbar/myweixiu1.png",
        selectedIconPath: "/images/tabbar/myweixiu2.png",
        text: "我的故障"
      }, {
        pagePath: "/pages/logs/logs",
        text: "个人中心",
        iconPath: "/images/tabbar/user1.png",
        selectedIconPath: "/images/tabbar/user2.png"
      }],



      list2: [{
        pagePath: "/pages/weixiu/myweixiu/myweixiu",
        iconPath: "/images/tabbar/weixiu1.png",
        selectedIconPath: "/images/tabbar/weixiu2.png",
        text: "我要维修"
      }, {
        pagePath: "/pages/Users/myMalfunction/myMalfunction",
        iconPath: "/images/tabbar/myweixiu1.png",
        selectedIconPath: "/images/tabbar/myweixiu2.png",
        text: "我的维修"
      }, {
        pagePath: "/pages/logs/logs",
        text: "个人中心",
        iconPath: "/images/tabbar/user1.png",
        selectedIconPath: "/images/tabbar/user2.png"
      }],


      list3: [{
        pagePath: "/pages/Users/myrepaire/myrepaire",
        iconPath: "/images/tabbar/weixiu1.png",
        selectedIconPath: "/images/tabbar/weixiu2.png",
        text: "我要报修"
      }, {
        pagePath: "/pages/charts/charts",
        iconPath: "/images/tabbar/chart1.png",
        selectedIconPath: "/images/tabbar/chart2.png",
        text: "故障报表"
      }, {
        pagePath: "/pages/logs/logs",
        text: "个人中心",
        iconPath: "/images/tabbar/user1.png",
        selectedIconPath: "/images/tabbar/user2.png"
      }]
    }],
    list: []
  },
  attached() {
    const roleId = wx.getStorageSync('statu')
    if (roleId == 20) {
      this.setData({
        list: this.data.allList[0].list1
      })
    }else if(roleId==5){
      this.setData({
        list: this.data.allList[0].list3
      })
    }else if(roleId==102){
      this.setData({
        list: this.data.allList[0].list2
      })
    }
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }
  },
})

分析:

  1. 首先,小程序tabbar只识别list里面的东西
  2. 先在data中定义一个list和allList数组,把三重身份用户的list分别定义为list1,list2,list3,放入allList
  3. const roleId = wx.getStorageSync('statu')
    获取用户信息存到缓存中,根据不同和的roleId来判断是什么身份,
  4. this.setData({ list: this.data.allList[0].list2 })
    根据身份把allList里面的子数组赋值给系统默认识别的`list``
  5. switchTab的作用根据不同的路径切换tabbar下标
switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }

index.json

{
  "usingComponents": {}
}

index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image class="cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view class="cover-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item .cover-image {
  width: 44rpx;
  height: 44rpx;
}

.tab-bar-item .cover-view {
  margin-top: 8rpx;
  font-size: 24rpx;
}

最后,在tabbar里面设置过 pagePath的路径文件下的 xxx.js的onshow:function(){}里面设置

或者说凡是用到tabbar组件的页面对应的xx.js里的onshow:function(){}都要按照以下进行设置

不然会出现tabbar显示与点击不同步的现象

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }

  },

//selected: 0就是选中的tabbar下标,根据不同页面显示不同tabbar下标

结果展示

1.普通用户

微信小程序 根据不同用户切换不同TabBar

2.运维人员

微信小程序 根据不同用户切换不同TabBar

3.领导

微信小程序 根据不同用户切换不同TabBar

可以看到根据用户信息里的roleId成功的切换了不同的tabbar

总结

到此这篇关于微信小程序如何根据不同用户切换不同TabBar的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
vue动态绑定style样式
Apr 20 #Vue.js
JS setTimeout与setInterval的区别
Apr 20 #Javascript
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
vue封装数字翻牌器
Apr 20 #Vue.js
You might like
PHP入门
2006/10/09 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JsRender实用入门教程
2014/10/31 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
解读python如何实现决策树算法
2018/10/11 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python configparser模块常用方法解析
2020/05/22 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
房租涨价通知
2015/04/23 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
《鲸》教学反思
2016/02/23 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers