小程序动态tabBar菜单，根据条件渲染不同的tabBar

前言

这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。
做成效果：

师傅菜单

说明

此文是Taro版，非Taro框架，思路可供参考，毕竟JS是互通的。

1. 配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
由于Taro没有单目录json，所以只配了第一条就生效了

  tabBar: {custom: true,list: [{'pagePath': 'pages/home/index','text': '首页',}, ...]},

2. 添加 tabBar 代码文件

  custom-tab-bar/index.js

此文件编写的组件会作为自定义的tabBar展示出来

主要步骤

custom-tab-bar/index.js里编写组件（此组件即是新的tabBar组件）
比如用户端有4个菜单，师傅端有3个菜单，这里我做好了标识type区分身份

const nav = [{'url': '/pages/home/index','type': 1,'text': '首页',}, {'url': '/pages/user1/index','type': 1,'text': '用户菜单1'}, {'url': '/pages/user2/index','type': 1,'text': '用户菜单2'}, {'url': '/pages/user3/index','type': 1,'text': '用户菜单3'}, {'url': '/pages/masterhome/index','type': 2,'text': '师傅首页'}, {'url': '/pages/master1/index','type': 2,'text': '师傅菜单1'}, {'url': '/pages/master2/index','type': 2,'text': '师傅菜单2'}]

登录后拿到后端返回的身份信息，这里定义一个变量isMaster存储起来
然后在 custom-tab-bar/index.js里拿到isMaster，根据isMaster处理得到navList来渲染需要对应的tabBar 列表

  const navList = isMaster ? nav.filter(item => item.type === 2) : data.filter(item => item.type === 1);

当isMaster 为true 时，tabBar显示
当isMaster 为false 时，tabBar显示

小程序动态tabBar菜单，根据条件渲染不同的tabBar相关推荐

【微信小程序入门到精通】— 条件渲染实现方式
目录前言一.wx:if 渲染方式 1.1 wx:if 介绍 1.2 wx:if 实例介绍二.结合 block 的整体条件渲染 2.1 block 组件 2.1 block + wx:if 结合实 ...
微信小程序实现lot开发04 条件渲染与列表渲染
我的网络继电器设备到了,今天下午也是很开心的测试了一波,很有意思,通过网络连接去阿里云的服务器,通过服务器实现对网段中的硬件发送控制信息以及收取状态反馈信息,可以发现基于mqtt协议,UDP协议里的网 ...
微信小程序入门与实战之条件渲染、列表渲染与小程序事件
使用LinUI的Icon组件代替图片ICON 引入LinUI的icon库: "usingComponents": {"l-icon":"/minipr ...
微信小程序开发WXML语法之条件渲染用法
1,wx:if 用法在框架中,使用 wx:if="" 来判断是否需要渲染该代码块 <view wx:if="{{condition}}"> Tru ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
微信小程序动态添加类名
微信小程序动态添加类名和vue的语法差不多,一个小测试 <view class="list-top"> <view data-num="1" ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
开直播的小程序需要多大的服务器,微信小程序直播需满足什么条件
满足品牌长线的规划,从追逐流量走向运营私域流量.不过,醉终能不能实现这个过程,或者这个私域流量过程要用多久,还得看微X信的速度了.小程序直播上线很长一段时间,还是有很多用户不会用,小编写下此文,希望 ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...

小程序动态tabBar菜单，根据条件渲染不同的tabBar

前言

说明

1. 配置信息

2. 添加 tabBar 代码文件

主要步骤

小程序动态tabBar菜单，根据条件渲染不同的tabBar相关推荐

最新文章

热门文章