UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
济南壹软网络科技有限公司18 小时前
国际盲盒电商新范式:深度剖析 V4 系统的全球化云原生架构
uni-app·盲盒源码·国际盲盒源码·盲盒开源源码·多语言盲盒源码
2501_915918411 天前
HTTPS 端口深度解析,443 并不是唯一入口,理解 TLS 流量行为与抓包策略
网络协议·http·ios·小程序·https·uni-app·iphone
2501_916008891 天前
iOS 开发者工具全景图,构建从编码、调试到性能诊断的多层级工程化工具体系
android·ios·小程序·https·uni-app·iphone·webview
走,带你去玩1 天前
uniapp live-pusher + 腾讯云直播
前端·javascript·uni-app
2501_915921431 天前
从需求到上架,现代 iOS 开发流程的工程化方法论
android·ios·小程序·https·uni-app·iphone·webview
oxygen-12041 天前
uniapp 锚点跳转
uni-app
脾气有点小暴1 天前
UniApp实现刷新当前页面
开发语言·前端·javascript·vue.js·uni-app
济南壹软网络科技有限公司1 天前
掘金国际盲盒电商:UniApp + ThinkPHP6 构建的全球化技术基石
uni-app·开源·盲盒源码·国际盲盒
一只一只妖1 天前
uni-app + ts请求封装最佳实践(GET/POST + 加载态 + 错误兜底)
typescript·uni-app
2501_916007472 天前
苹果手机iOS应用管理全指南与隐藏功能详解
android·ios·智能手机·小程序·uni-app·iphone·webview