小程序根据不同用户，显示不同tabBar

小程序根据不同用户，显示不同tabBar（官方自定义 tabBar）

现有需求：小程序用户有2种身份（vip，普通用户）
微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个；

代码实现

1、app.json
tabbar里面的sustom要设置为true

{"pages": [xxxx],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#ffffff","navigationStyle": "default","navigationBarTextStyle": "black"},"tabBar": {"custom": true,"color": "#BDBDBD","selectedColor": "#212121","backgroundColor": "#FFFFFF","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "img/tabicon/home.png","selectedIconPath": "img/tabicon/home-active.png"},{"pagePath": "pages/signin/signin","text": "签到","iconPath": "img/tabicon/sign.png","selectedIconPath": "img/tabicon/sign-active.png"},{"pagePath": "pages/card/card","text": "优惠券","iconPath": "img/tabicon/card.png","selectedIconPath": "img/tabicon/card-active.png"},{"pagePath": "pages/profitSelect/profitSelect","text": "收益","iconPath": "img/tabicon/card.png","selectedIconPath": "img/tabicon/card-active.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "img/tabicon/my.png","selectedIconPath": "img/tabicon/my-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

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

2、自定义tabbar（ custom-tab-bar官方命名）

（1）index.js

小程序tabbar只识别list
根据用户缓存信息，判断用户的身份或登录状态（roleId == ‘’ || roleId == 2）
根据用户的身份把tabList里面的子数组赋值给系统默认识别的`list``
switchTab的作用根据不同的路径切换tabbar下标

Component({data: {selected: 0,color: "#BDBDBD",roleId: '',selectedColor: "#212121",tabList: [{list1: [{"pagePath": "/pages/index/index","text": "首页","iconPath": "/img/tabicon/home.png","selectedIconPath": "/img/tabicon/home-active.png"},{"pagePath": "/pages/signin/signin","text": "签到","iconPath": "/img/tabicon/sign.png","selectedIconPath": "/img/tabicon/sign-active.png"},{"pagePath": "/pages/card/card","text": "优惠券","iconPath": "/img/tabicon/card.png","selectedIconPath": "/img/tabicon/card-active.png"},{"pagePath": "/pages/my/my","text": "我的","iconPath": "/img/tabicon/my.png","selectedIconPath": "/img/tabicon/my-active.png"}],list2: [{"pagePath": "/pages/index/index","text": "首页","iconPath": "/img/tabicon/home.png","selectedIconPath": "/img/tabicon/home-active.png"},{"pagePath": "/pages/signin/signin","text": "签到","iconPath": "/img/tabicon/sign.png","selectedIconPath": "/img/tabicon/sign-active.png"},{"pagePath": "/pages/profitSelect/profitSelect","text": "收益","iconPath": "/img/tabicon/card.png","selectedIconPath": "/img/tabicon/card-active.png"},{"pagePath": "/pages/my/my","text": "我的","iconPath": "/img/tabicon/my.png","selectedIconPath": "/img/tabicon/my-active.png"}],}],list: []},attached() {const roleId = wx.getStorageSync('is_vip')if (roleId == '' || roleId == 2) { //普通用户和未登录时默认第一种this.setData({list: this.data.tabList[0].list1})} else if (roleId == 1) { //vip用户显示第二种this.setData({list: this.data.tabList[0].list2})}},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({ url })this.setData({selected: data.index})}},})

（2）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 src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view :style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view></cover-view>

ps：有时会报错，修改调试

（3）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: 27px;height: 27px;
}.tab-bar-item cover-view {font-size: 10px;
}

3、凡是需要显示tabbar组件的页面，对应的xx.js里的onshow:function(){}都要按照以下进行设置方可显示tabber（selected的值是这个页面在tabbar中的顺序）

onShow() {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 0})}},

emmm

小程序根据不同用户，显示不同tabBar相关推荐

微信小程序根据不同用户切换不同`TabBar`，简单易懂
现有需求:小程序用户有三种身份(公众.运维人员.领导),根据不同用户身份显示不同的tabbar 众所周知微信小程序全局文件app.json里面的"tabBar"里面的list只能放 ...
java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
【微信小程序】获取用户信息
文章目录获取用户信息组件open-data button组件中的open-type 接口getUserProfile 查看授权结果获取用户信息组件open-data 组件 open-data用 ...
微信小程序踩坑—用户登录界面
最近做的一个项目有涉及到用户登录.微信小程序的用户登录在我看来有两种,一种是需要用微信提供的用户身份标识,简单地说就是小程序的登录者就是使用这个小程序的微信用户,还有一种是小程序和服务器之间有自己的一 ...
每日新闻丨刘强东卸任京东云计算经理职务；百度智能小程序月活用户突破3亿...
趋势洞察苗圩:目前全国已开通5G基站11.3万个近日,工业和信息化部党组书记.部长苗圩在2019世界5G大会上表示,进入5G时代,在第三代合作伙伴计划3GPP总体框架下,各国电信运营.设备制造企业 ...
腾讯微搭小程序获取微信用户信息
腾讯微搭小程序获取微信用户信息无论你对低代码开发的爱与恨, 微信生态的强大毋庸置疑. 因此熟悉微搭技术还是很有必要的! 在大多数应用中, 都需要获取和跟踪用户信息. 本文就微搭中如何获取和存储用户信 ...
微信小程序——最新获取用户昵称和头像的方法总结
前段时间微信小程序对获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统 ...

小程序根据不同用户，显示不同tabBar

小程序根据不同用户，显示不同tabBar（官方自定义 tabBar）

小程序根据不同用户，显示不同tabBar相关推荐

最新文章

热门文章