UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
NiNg_1_2345 小时前
vue框架和uniapp框架区别
vue.js·uni-app
某公司摸鱼前端1 天前
uniapp微信小程序使用ucharts遮挡自定义tabbar的最佳解决方案
微信小程序·小程序·uni-app·echarts·ucharts
小怪瘦791 天前
UniApp基于xe-upload实现文件上传组件
uni-app
风清云淡_A2 天前
uniapp中检测应用更新的两种方式-升级中心之uni-upgrade-center-app
前端·uni-app
海岛日记2 天前
uniapp url取消#
java·数据库·uni-app
ZL_5672 天前
uniapp中实现评分组件,多用于购买商品后,对商品进行评价等场景
前端·javascript·uni-app
家里有只小肥猫2 天前
uni-app在线预览pdf
pdf·uni-app
diygwcom2 天前
低代码可视化-UniApp二维码可视化-代码生成器
低代码·uni-app
霸王蟹2 天前
uniapp中uni.request的统一封装 (ts版)
前端·javascript·vue.js·笔记·uni-app