微信小程序 根据不同用户切换不同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 相关文章推荐
纯js简单日历实现代码
Oct 05 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue2.x select2 指令封装详解
Oct 12 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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+MySQL实现的简单投票系统实例
2016/02/24 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
node.js 抓取代理ip实例代码
2017/04/30 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python 容器总结整理
2017/04/04 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python实现翻译word表格小程序
2020/02/27 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
人资专员岗位职责
2014/04/04 职场文书
早读课迟到检讨书
2014/09/25 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
React更新渲染原理深入分析
2022/12/24 Javascript