UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
橘 日向2 小时前
uniApp开发微信小程序-连接蓝牙连接打印机上岸!
微信小程序·uni-app·notepad++
cc蒲公英5 小时前
uniapp http URL方式访问本地电脑目录文件html
uni-app
老李不敲代码17 小时前
榕壹云外卖跑腿系统:基于Spring Boot+MySQL+UniApp的智慧生活服务平台
spring boot·mysql·微信小程序·uni-app·软件需求
不会叫的狼1 天前
uni-app初学
uni-app
老李不敲代码1 天前
榕壹云在线商城系统:基于THinkPHP+ Mysql+UniApp全端适配、高效部署的电商解决方案
mysql·微信小程序·小程序·uni-app·软件需求
diygwcom1 天前
uniapp解决上架华为应用市场审核要求-监听权限的申请
uni-app
Json_1 天前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
前端·uni-app·蓝牙
zooKevin1 天前
前端实现docx格式word文件预览,可以兼容原生、vue2、以及uni-app 项目,详细步骤。
前端·uni-app·word·docx
前端(从入门到入土)2 天前
uniapp加载json动画
uni-app·json
peachSoda72 天前
uniapp小程序生成海报/图片并保存分享
小程序·uni-app