当前位置: 首页 > news >正文

uniapp自定义权限菜单,动态tabbar

已封装为组件,亲测4个菜单项目可以切换,

以下为示例,根据Storage 中 userType 的 值,判断权限菜单

<template><view class="tab-bar pb10"><view class="tabli" v-for="(tab, index) in tabs" :key="index" @click="switchTab(tab)"><image :src="currentTab === tab.text ? tab.selectedIconPath : tab.iconPath" mode="aspectFit"></image><text :class="currentTab === tab.text ? 'active' : ''">{{ tab.text }}</text></view><loginTourist ref="loginPop"></loginTourist></view>
</template>
<script>
export default {props: {//当前页currentTab: {type: String,required: true}},data() {return {// 游客、管理员、村民usertype: uni.getStorageSync('userType'),}},
computed: {// 权限菜单tabs() {if (this.usertype =='村民') {return [{"pagePath": "/pages/homepage/index","iconPath": this.img('home-1'),"selectedIconPath": this.img('home'),"text": "首页"},
{"pagePath": "/workPages/teach/index","iconPath": this.img('bs-1'),"selectedIconPath": this.img('bs'),"text": "办事指南"},{"pagePath": "/pages/messag/index","iconPath": this.img('mass-1'),"selectedIconPath": this.img('mass'),"text": "消息"},{"pagePath": "/pages/mine/index","iconPath": this.img('mine-1'),"selectedIconPath": this.img('mine'),"text": "我的"}],}else if (this.usertype =='管理员') {// 管理员return [{"pagePath": "/pages/homepage/index","iconPath": this.img('home-1'),"selectedIconPath": this.img('home'),"text": "首页"}, ],}}},
methods: {switchTab(tab) {// console.log("底部导航", tab)let userType = uni.getStorageSync('userType')||this.userTypelet token = uni.getStorageSync('token')console.log('底部导航,用户,token|',tab.text ,userType,token)uni.navigateTo({url: tab.pagePath});},// 统一加图片域名路径img(img) {return 图片网址前缀 + 'tabBar/' + img + '.png'},},</script>
<style>.tab-bar {justify-content: space-around;align-items: center;height: 150upx;position: fixed;left: 0;z-index: 99999999999999999999;width: 100%;display: flex;justify-content: space-around;background: rgb(240 242 245 / 97%);border-top: 0.5px solid rgba(240, 242, 245, 1)}.tab-bar .tabli {flex: 1;display: flex;flex-direction: column;align-items: center;
justify-content: center;}.tab-bar image {width: 25px;height: 25px;}.tab-bar text {font-size: 12px;margin-top: 5px;}.tab-bar text.active {font-weight: bold;}
</style>

声明为全局组件:main.js 中添加

import tzTabBar from "@/components/atz-tabbar/atz-tabbar.vue"//自定义底部菜单
Vue.component('tzTabBar', tzTabBar)

在页面中使用:

<tzTabBar :currentTab="'消息'"></tzTabBar>

相关文章:

uniapp自定义权限菜单,动态tabbar

已封装为组件&#xff0c;亲测4个菜单项目可以切换&#xff0c; 以下为示例&#xff0c;根据Storage 中 userType 的 值&#xff0c;判断权限菜单 <template><view class"tab-bar pb10"><view class"tabli" v-for"(tab, index) in ta…...

ubuntu20.04配置解压版mysql5.7

目录 1.创建mysql 用户组和用户2.下载 MySQL 5.7 解压版3.解压 MySQL 文件4.将 MySQL 移动到适当的目录5.更改mysql目录所属的用户组和用户&#xff0c;以及权限6.进入mysql/bin/目录&#xff0c;安装初始化7.编辑/etc/mysql/my.cnf配置文件8.启动 MySQL 服务&#xff1a;9.建立…...

【js】vue获取document.getElementById(a)为null

需求 在菜单A页面点击某个元素携带id跳转到B详情页面&#xff0c;B页面获取该id元素的offsetTop, 并自动滚动到该元素处 问题 跳转到B详情页面, 在mounted获取到document.getElementById(a)为null, 因为整个详情页面是从后端获取来渲染的数据, 因此此时dom元素还未渲染出来,…...

系列六、Mybatis的一级缓存

一、概述 Mybatis一级缓存的作用域是同一个SqlSession&#xff0c;在同一个SqlSession中执行两次相同的查询&#xff0c;第一次执行完毕后&#xff0c;Mybatis会将查询到的数据缓存起来&#xff08;缓存到内存中&#xff09;&#xff0c; 第二次执行相同的查询时&#xff0c;会…...

用中文编程工具给澳大利亚客户定制开发的英文版服装进销存软件应用实例

用中文编程工具给澳大利亚客户定制开发的英文版服装进销存软件应用实例 软件从2016年一直用到现在&#xff0c;而且开的分店也是安装的这个软件&#xff0c;上图是定制打印的格式。 该编程工具不但可以连接硬件&#xff0c;而且可以开发大型的软件。 编程系统化课程总目录及明…...

geoserver 的跨域问题怎么解决

文章目录 问题分析问题 geoserver 发生跨域问题报错 分析 要解决 GeoServer 的跨域问题,可以通过配置 GeoServer 的 web.xml 文件来启用跨域资源共享(CORS)。以下是一些简单的步骤来实现这一点: 找到 GeoServer 的安装目录下的 webapps/geoserver/WEB-INF 文件夹。在该文…...

SQL语法实践(一)

文章 原文链接 实践 CREATE TABLE friend(fid INT NOT NULL,NAME VARCHAR(10) NOT NULL,age INT NOT NULL,adress VARCHAR(10) )SHOW TABLES; SELECT * FROM friend; SELECT fid,NAME FROM friend;INSERT INTO friend VALUES(1,Jack,18,Tianjing); INSERT INTO friend VALUE…...

路由器如何设置IP地址

IP地址是计算机网络中的关键元素&#xff0c;用于标识和定位设备和主机。在家庭或办公室网络中&#xff0c;路由器起到了连接内部设备和外部互联网的关键作用。为了使网络正常运行&#xff0c;需要正确设置路由器的IP地址。本文将介绍如何设置路由器的IP地址&#xff0c;以确保…...

自动驾驶算法(一):Dijkstra算法讲解与代码实现

目录 0 本节关键词&#xff1a;栅格地图、算法、路径规划 1 Dijkstra算法详解 2 Dijkstra代码详解 0 本节关键词&#xff1a;栅格地图、算法、路径规划 1 Dijkstra算法详解 用于图中寻找最短路径。节点是地点&#xff0c;边是权重。 从起点开始逐步扩展&#xff0c;每一步为一…...

MS5910PA为行业内领先的可配置10bit到16bit分辨率的旋变数字转换器,可替代AD2S1210

MS5910PA 是一款可配置 10bit 到 16bit 分辨率的旋 变数字转换器。片上集成正弦波激励电路&#xff0c;正弦和余弦 允许输入峰峰值幅度为 2.3V 到 4.0V &#xff0c;频率范围为 2kHz 至 20kHz 。 转换器可并行或串行输出角度和速度对应的 数字量。 MS5910PA 采…...

Random指定随机种子遇到的坑

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言指定随机种子出现的问题&#xff1f;总结 前言 业务中&#xff0c;之前有一个抽奖的需求&#xff0c;之初想让固定的奖品和玩家绑定一个固定的池子&#xff0c…...

2023云栖大会:属于开发者的狂欢

就在10月31日这天&#xff0c;杭州云栖小镇热闹非凡&#xff0c;第八届云栖大会在杭州云栖小镇盛大举行。这次大会以“聚焦大模型与生成式AI”为主题&#xff0c;开发者们齐聚一堂&#xff0c;共同探讨前沿技术趋势&#xff0c;以及如何将这些技术应用到实际业务场景中。 当然…...

jsp 网上订餐Myeclipse开发mysql数据库web结构java编程计算机网页项目

选题目的 本设计课题为网上订餐系统设计与实现&#xff0c;提供无纸化点餐、支付&#xff0c;实现点餐快捷&#xff0c;方便管理。餐厅电子化是目前的潮流和趋势&#xff0c;大多数企业都将公司内部运营流程电子化。网上订餐管理系统应运而生&#xff0c;能够有效提高公司的管…...

优化大表分页查询性能:大表LIMIT 1000000, 10该怎么优化?

在处理大数据量的MySQL表时&#xff0c;我们经常会遇到一个问题&#xff1a;当我们尝试使用LIMIT语句进行分页查询时&#xff0c;性能会随着偏移量的增加而显著下降。例如&#xff0c;SELECT * FROM table LIMIT 1000000, 10 这样的查询可能会非常慢。那么&#xff0c;我们应该…...

ubuntu PX4 vscode stlink debug设置

硬件 stlink holybro debug板 pixhawk4 安装openocd 官方文档&#xff0c;但是第一步安装建议从源码安装&#xff0c;bug少很多 github链接 编译安装&#xff0c;参考 ./bootstrap (when building from the git repository)./configure [options]makesudo make install安装后…...

Flask的一种启动方式和三种托管方式

1. 原生启动 Flask 支持使用原生的 app.run() 方法来启动应用程序。这种方法是最简单、最基本的启动方式&#xff0c;适用于开发环境和小型应用程序。 from flask import Flaskapp Flask(__name__)app.route(/) def hello_world():return Hello, World!if __name__ __main__…...

cudnn too short

原因是libcudnn.so为软链接&#xff0c;相当于快捷键&#xff0c;但是没有映射到真正的libcudnn.so.8.9.5上 cd /usr/local/cuda-11.6/lib64 ln -s libcudnn.so.8.9.5 libcudnn.so.8...

01、SpringBoot + MyBaits-Plus 集成微信支付 -->项目搭建

目录 SpringBoot MyBaits-Plus 集成微信支付 之 项目搭建1、创建boot项目2、引入Swagger作用&#xff1a;2-1、引入依赖2-2、写配置文件进行测试2-3、访问Swagger页面2-4、注解优化显示 3、定义统一结果作用&#xff1a;3-1、引入lombok依赖3-2、写个统一结果的类-->RR类的…...

Linux 性能调优之网络优化

写在前面 考试整理相关笔记分享一些 Linux 中网络内核参数调优的笔记理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃…...

RT-Thread系统使用常见问题处理记录

1.使用telnet连接系统时发送help指令显示不全的问题。 原因&#xff1a;telnet发送缓存太小。 解决办法&#xff1a;更改agile_telnet软件包里Set agile_telnet tx buffer size的大小。 2.使用Paho MQTT软件包过一段时间报错hard fault on thread: mqtt0 解决办法&#xff1…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...