UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
游戏开发爱好者87 小时前
iOS 商店上架全流程解析 从工程准备到审核通过的系统化实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
toooooop88 小时前
Vuex 中 state、mutations 和 actions 的原理和写法
前端·javascript·uni-app
林_xi8 小时前
uniapp使用@uni-ku/root插件实现全局组件
前端·uni-app
计算机毕设定制辅导-无忧学长9 小时前
基于uni-app的“民族风韵”特色购物小程序
uni-app
一个处女座的程序猿O(∩_∩)O9 小时前
UniApp 生命周期全解析:从应用到页面,再到组件的完美协奏曲
前端·uni-app
你听得到1111 小时前
Web前端们!我用三年亲身经历,说说从 uniapp 到 Flutter怎么转型的,这条路我爬过,坑我踩过
前端·flutter·uni-app
IT 前端 张13 小时前
Uniapp全局显示 悬浮组件/无需单页面引入
前端·javascript·uni-app
行云流水62614 小时前
uniapp h5图片长按隐藏默认菜单弹出
前端·javascript·uni-app
对角18 小时前
用 Gemini 3 复刻了 X 上爆火的复古拍立得,AI 也能写小程序了?
前端·uni-app·ai编程
2501_9160088920 小时前
Objective-C 测试(OC 测试)指南 从单元测试到性能调优的多工具协同方法
android·ios·小程序·https·uni-app·iphone·webview