UNIAPP 动态菜单实现方法

1. 封装tabbar组件,组件UI使用uview的tabbar

  • allList 定义出全部的菜单
  • list 定义当前用户能看到的菜单
  • 使用 u-tabbar 渲染出来 list

2. 权限判断处理

3. 使用方式

在 tab 页,底部放入该 tab 组件,并设置当前回显的页面,这里使用了根据页面name回显的方式。

由于这里是动态菜单,所以菜单的位置不太确定,所以name非常合适。

4. 菜单数据缓存

由于每次都是新请求权限接口,会造成不必要的性能损耗。所以前端这里缓存一下。

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
雪芽蓝域zzs4 分钟前
uniapp 该应用与此设备的CPU不兼容
uni-app
CHB3 小时前
uni-task - 轻量级团队任务管理系统
uni-app
行思理11 小时前
UniApp 打包配置 iOS的UniversalLinks
uni-app·universal link
雪芽蓝域zzs11 小时前
uni-app x 使用 UTS 语言使用 mixins
开发语言·javascript·uni-app
雪芽蓝域zzs12 小时前
uni-app x 中使用 UTS 语言实现兼容鸿蒙的加密
华为·uni-app·harmonyos
2501_9159090613 小时前
苹果App Store上架全流程指南从注册到上线
android·ios·小程序·https·uni-app·iphone·webview
anyup1 天前
uni-app 全能日历组件,支持农历、酒店预订、打卡签到、价格日历多种场景
前端·前端框架·uni-app
优雅的大白鹅2 天前
创建uniapp小程序
小程序·uni-app
笨笨狗吞噬者3 天前
uni-app 运行时揭秘:styleIsolation 的转化
前端·微信小程序·uni-app
神の愛3 天前
JeecgBoot-Uniapp
uni-app