UNIAPP 动态菜单实现方法

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

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

2. 权限判断处理

3. 使用方式

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

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

4. 菜单数据缓存

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

  • 菜单数据存入缓存中
  • 下次直接从缓存中拿
  • 每次打开小程序的时候清空该缓存
相关推荐
会说法语的猪2 小时前
uniapp使用uni.navigateBack返回页面时携带参数到上个页面
前端·uni-app
Li_Ning219 小时前
vue3+uniapp开发鸿蒙初体验
华为·uni-app·harmonyos
林涧泣10 小时前
【Uniapp-Vue3】uni-icons的安装和使用
前端·vue.js·uni-app
林涧泣12 小时前
【Uniapp-Vue3】下拉刷新
前端·vue.js·uni-app
林涧泣12 小时前
【Uniapp-Vue3】点击回到顶部
uni-app
寰宇软件20 小时前
PHP防伪溯源一体化管理系统小程序
小程序·uni-app·vue·php
大叔_爱编程1 天前
wx035基于springboot+vue+uniapp的校园二手交易小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
林涧泣1 天前
【Uniapp-Vue3】previewImage图片预览
uni-app
灰天7681 天前
健身房项目 Uniapp+若依Vue3版搭建!!
uni-app
努力搬砖的程序媛儿2 天前
uniapp广告飘窗
前端·javascript·uni-app