UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
spmcor4 小时前
身份证读卡“无感登录”方案实践:从手动点击到自动检测
uni-app
PedroQue9910 小时前
uni-router v1.8.0新增冷启动守卫补执行
前端·uni-app
PedroQue991 天前
uni-router v1.7.0重磅更新:守卫重定向自由掌控
前端·uni-app
一份执念3 天前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
PedroQue993 天前
V1.6.1性能优化:高频路径提速与代码精简
前端·uni-app
夏碧笔5 天前
uni-app跨端地图实战:用第三方LBS替代微信平台收费服务
uni-app
用户69903048487510 天前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
ITKEY_10 天前
uniapp微信开发者工具 更改AppID失败 touristappid
uni-app
Geek_Vison10 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
CHB11 天前
HDC2026 演讲实录|AI 驱动的跨端进化:利用 uni-agent 快速构建高性能鸿蒙应用
uni-app·harmonyos