微信小程序 根据不同用户切换不同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 相关文章推荐
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
JS验证码实现代码
Sep 14 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Javascript实现的分页函数
2006/12/22 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
利用JS实现数字增长
2016/07/28 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
php 修改密码实现代码
2017/05/24 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python中无限元素列表的实现方法
2014/08/18 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python实现购物车购物小程序
2018/04/18 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
教育孩子心得体会
2014/01/01 职场文书
好邻里事迹材料
2014/01/16 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
甘南现象心得体会
2014/09/11 职场文书
加强作风建设工作总结
2014/10/23 职场文书
庭外和解协议书
2016/03/23 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android