UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
上优2 小时前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
耶啵奶膘14 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o21 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index21 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情1 天前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64