UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
2501_915106322 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
用户69903048487512 小时前
uniapp 构建本地txt跨平台小程序、h5、app通用
微信小程序·uni-app
胡八一13 小时前
使用qianjkun uniapp 主应用 集成 vue微应用
前端·vue.js·uni-app
游戏开发爱好者813 小时前
基于uni-app的iOS应用上架,从打包到分发的全流程
android·ios·小程序·https·uni-app·iphone·webview
ᥬ 小月亮14 小时前
Uniapp中自定义导航栏
javascript·css·uni-app
vayy1 天前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
FAIRY_STARS1 天前
记录uni-app好用的select组件
uni-app
FAIRY_STARS1 天前
关于uni-app pages.json配置详解
uni-app
FliPPeDround2 天前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app
iOS阿玮2 天前
苹果审核被拒4.8.0条款,快速过审通关指南。
uni-app·app·apple