微信小程序 根据不同用户切换不同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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
详解js异步文件加载器
2016/01/24 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python logging模块用法示例
2018/08/28 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
QML使用Python的函数过程解析
2019/09/26 Python
基于python使用tibco ems代码实例
2019/12/20 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
信息服务专业毕业生求职信
2014/03/02 职场文书
事假请假条范文
2014/04/11 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
离婚案件上诉状
2015/05/23 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
SpringBoot详解执行过程
2022/07/15 Java/Android
win7配置本地ftp服务器的图文教程
2022/08/05 Servers