uni-app自定义底部tab并且根据字段显示和隐藏
首先将所有tab使用到的页面创建好并且在pages里面配置好，要在pages.json中的"tabBar里面配置"custom": true将自带的tab底部导航关闭
"pages": [{"path": "pages/mine/mine","style": {"navigationBarTitleText": "我的"}},{"path": "pages/home/home","style": {"navigationBarTitleText": "首页"}},{"path": "pages/Operation/Operation","style": {"navigationBarTitleText": "运维"}},{"path": "pages/index/index","style": {"navigationBarTitleText": "服务"}},{"path" : "pages/shebe/shebe","style" : {"navigationBarTitleText" : "设备"}}],
"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#1296db","borderStyle": "black","backgroundColor": "#F8F8F8","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "static/imgs/imgs55.png","selectedIconPath": "static/imgs/imgs5.png"},{"pagePath": "pages/Operation/Operation","text": "运维","iconPath": "static/imgs/imgs66.png","selectedIconPath": "static/imgs/imgs6.png"},{"pagePath": "pages/shebe/shebe","text": "设备","iconPath": "static/imgs/imgs66.png","selectedIconPath": "static/imgs/imgs6.png"},{"pagePath": "pages/index/index","text": "服务","iconPath": "static/imgs/imgs11.png","selectedIconPath": "static/imgs/imgs1.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "static/imgs/imgs44.png","selectedIconPath": "static/imgs/imgs4.png"}]},在uni-app官网找到官网插件搜索tab底部找到自己要用的插件如（custom-tab-bar 自定义底部导航栏 - DCloud 插件市场）
在每一个用到tab页面的底部使用
<CustomTabBar modifyType="index"></CustomTabBar>
import CustomTabBar from "@/components/custom-tab-bar/index.vue";
export default {components: {CustomTabBar}},
}中modifyType="index"中的index根据自己定义的路径来定，在那个页面用感觉那个页面来定
如我在mine页面用代码就是
<CustomTabBar modifyType="mine"></CustomTabBar>
import CustomTabBar from "@/components/custom-tab-bar/index.vue";如何根据权限设置tab显示几个，要找到我们引入的tab页面，然后根据相关要求进行更改
<template><view v-if="responseRoles.includes('sitemanage')"><view class="tab-main"><view class="tabs" :class="{ spaceCenter: tabList.length === 1 }"><view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList":key="index" @click.stop="handleTab(item, index)"><image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image><view class="text">{{ item.label }}</view></view></view></view></view><view v-if="responseRoles.includes('electricCollection')"><view class="tab-main"><view class="tabs" :class="{ spaceCenter: tabList.length === 1 }"><view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabsTab":key="index" @click.stop="handleTab(item, index)"><image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image><view class="text">{{ item.label }}</view></view></view></view></view><view v-if="responseRoles.includes('operation')"><view class="tab-main"><view class="tabs" :class="{ spaceCenter: tabList.length === 1 }"><view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList":key="index" @click.stop="handleTab(item, index)"><image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image><view class="text">{{ item.label }}</view></view></view></view></view></template><script>import {appgetInfo} from '@/src/api/api.js';export default {props: {modifyType: {type: String,default: "",},},computed: {tabList() {return this.tabs.filter((item) => item.show);},},data() {return {currentIndex: 0,responseRoles: [],tabs: [{label: "首页",type: "home",url: "/pages/home/home",iconPath: "/static/imgs/imgs55.png",selectedIconPath: "/static/imgs/imgs5.png",show: true,},{label: "运维",type: "Operation",url: "/pages/Operation/Operation",iconPath: "/static/imgs/imgs66.png",selectedIconPath: "/static/imgs/imgs6.png",show: true,},{label: "服务",type: "index",url: "/pages/index/index",iconPath: "/static/imgs/imgs11.png",selectedIconPath: "/static/imgs/imgs1.png",show: true,},{label: "我的",type: "mine",url: "/pages/mine/mine",iconPath: "/static/imgs/imgs44.png",selectedIconPath: "/static/imgs/imgs4.png",show: true,}],tabsTab: [{label: "首页",type: "home",url: "/pages/home/home",iconPath: "/static/imgs/imgs55.png",selectedIconPath: "/static/imgs/imgs5.png",show: true,},{label: "设备",type: "shebe",url: "/pages/shebe/shebe",iconPath: "/static/imgs/imgs66.png",selectedIconPath: "/static/imgs/imgs6.png",show: true,},{label: "服务",type: "index",url: "/pages/index/index",iconPath: "/static/imgs/imgs11.png",selectedIconPath: "/static/imgs/imgs1.png",show: true,},{label: "我的",type: "mine",url: "/pages/mine/mine",iconPath: "/static/imgs/imgs44.png",selectedIconPath: "/static/imgs/imgs4.png",show: true,}]};},methods: {handleTab(item, index) {if (this.currentIndex === index) {return;}uni.switchTab({url: item.url,});},async fetchTabData() {try {const response = await appgetInfo();this.responseRoles = response.roles;} catch (error) {console.error("获取数据失败:", error);}},},mounted() {this.fetchTabData();if (this.modifyType.length) {this.currentIndex = this.tabList.findIndex((item) => item.type === this.modifyType);if(this.currentIndex===-1){this.currentIndex=1};}},};
</script><style lang="scss" scoped>.tab-main {position: fixed;z-index: 9999;width: 100%;bottom: 0;left: 0;background: #ffffff;box-shadow: 0rpx -1rpx 0rpx 0rpx #ebedf0;.tabs {display: flex;justify-content: space-between;padding: 0 50rpx;height: 120rpx;.tab-item {padding: 16rpx 50rpx;display: flex;align-items: center;flex-direction: column;.img {width: 50rpx;height: 50rpx;}.text {margin-top: 12rpx;font-size: 24rpx;font-weight: 500;color: #5d5d5d;line-height: 24rpx;}}.tab-item.active {.text {color: #4199d1;}}}.spaceCenter {justify-content: center;}}
</style>相关文章：
uni-app自定义底部tab并且根据字段显示和隐藏
首先将所有tab使用到的页面创建好并且在pages里面配置好，要在pages.json中的"tabBar里面配置"custom": true将自带的tab底部导航关闭 "pages": [{"path": "pages/mine/mine","style": {"navigationBa…...
C#开发合集
用C#轻松搞定m3u8视频下载与合并 嘿，程序员们！今天咱们来聊聊如何用C#写个小程序，轻松下载和合并m3u8视频文件。没错，就是那种分段的流媒体视频。准备好了吗？让我们开始吧！ 准备工作 在动手之前…...
Chrome和edge浏览器如何为任何网站强制暗模式
前言 因为我的编辑器是黑色，可能是看的时间长了比较喜欢这种颜色了，感觉白色有些刺眼。尤其是看文章时，两边的空白纯白色，所以强迫症搜素设置了谷歌浏览器和edge如何设置成黑色。 Chrome和edge浏览器如何为任何网站强制暗模式 前…...
第二十章 Java多线程--JUC并发工具-CountDownLatch
目录 一、CountDownLatch基础概念 CountDownLatch 的核心概念 CountDownLatch 的常用方法 场景一：主线程等待多个子线程执行完毕 场景二：实现多个线程同时开始执行任务 场景三：统计报表优化 CountDownLatch 的局限性 结论 二、Count…...
限制对 etcd 的访问范围是确保 Kubernetes 集群安全的一个重要环节。
限制对 etcd 的访问范围是确保 Kubernetes 集群安全的一个重要环节。通常，etcd 只应当对 Kubernetes 控制平面的组件（如 API Server、Controller Manager、Scheduler 等）以及某些维护工具（如备份工具）开放访问权限&…...
shell脚本基础学习_总结篇（完结）
细致观看可以，访问shell脚本学习专栏，对应章节会有配图https://blog.csdn.net/2201_75446043/category_12833287.html?spm1001.2014.3001.5482 导语 一、shell脚本简介 1. 定义： 2. 主要特点： 3. shell脚本的基本结构 4. S…...
Linux之网络基础
网络发展 网络的发展可以从人与人之间的工作模式开始谈起, 人与人的工作模式反应了机器与机器的工作模式: 1. 独立模式: 在网络发展的早期计算机间处于独立模式, 计算机之间相互独立 最开始计算机之间是独立运行的, 数据之间的交互需要人用软盘等存储介质拷贝过去, 一般涉及…...
《Vue零基础入门教程》第十课：属性绑定指令
往期内容 《Vue零基础入门教程》第一课：Vue简介 《Vue零基础入门教程》第二课：搭建开发环境 《Vue零基础入门教程》第三课：起步案例 《Vue零基础入门教程》第四课：应用实例 《Vue零基础入门教程》第五课：挂载 《…...
RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange
前言： RabbitMQ 延迟队列插件（rabbitmq_delayed_message_exchange）是一个社区开发的插件，它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件，用户可以创建一种特殊的交换机类型 x-delayed-message，该…...
MATLAB中Simulink的基础知识
Simulink是MATLAB中的一种可视化仿真工具， 是一种基于MATLAB的框图设计环境，是实现动态系统建模、仿真和分析的一个软件包，被广泛应用于线性系统、非线性系统、数字控制及数字信号处理的建模和仿真中。 Simulink提供一个动态系统建模、仿真和…...
Swift——单例模式
单例是软件设计常用的一种模式，它的核心结构中只有一个被称为单例的特殊类，通过单例模式可以保证应用该模式的类只有一个实例化对象，其作用就是能够使类中的一个对象成为系统中的唯一实例。 单例的特点： 某个类只有一个实例化对象…...
百度智能云千帆大模型平台引领企业创新增长
本文整理自百度世界大会 2024——「智能跃迁 产业加速」论坛的同名演讲。 更多大会演讲内容，请访问： https://baiduworld.baidu.com 首先，跟大家分享一张图，这个是我们目前大模型应用落地的场景分布。可以看到，大模型…...
scala统计词频
目标：统计词频 （1）从文件1.tst，读入内容，保存在一个字符串中。 （2）统计字符串中，每个单词出现的频率 （3）对结果进行排序 （4）把最后…...
CTF之密码学（费纳姆密码）
一、作为二进制替换密码的费纳姆密码 定义：费纳姆密码是一种由二进制产生的替换密码，也被称为弗纳姆密码（Vernam cipher）。它采用二进制表示法，将明文转化为二进制数字，并通过与密钥进行模2加法运算来产生密…...
postgresql按照年月日统计历史数据
1.按照日 SELECT a.time,COALESCE(b.counts,0) as counts from ( SELECT to_char ( b, YYYY-MM-DD ) AS time FROM generate_series ( to_timestamp ( 2024-06-01, YYYY-MM-DD hh24:mi:ss ), to_timestamp ( 2024-06-30, YYYY-MM-DD hh24:mi:ss ), 1 days ) AS b GROUP BY tim…...
Python 网络爬虫进阶：动态网页爬取与反爬机制应对
在上一篇文章中，我们学习了如何使用 Python 构建一个基本的网络爬虫。然而，在实际应用中，许多网站使用动态内容加载或实现反爬机制来阻止未经授权的抓取。因此，本篇文章将深入探讨以下进阶主题： 如何处理动态加载的网…...
YOLOv11融合PIDNet中的PagFM模块及相关改进思路
YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总 《PIDNet: A Real-time Semantic Segmentation Network Inspired by PID Controllers》 一、 模块介绍 论文链接：https://arxiv.org/pdf/2…...
使用Python实现自动化邮件通知：当长时程序运行结束时
使用Python实现自动化邮件通知：当长时程序运行结束时 前提声明 本代码仅供学习和研究使用，不得用于商业用途。请确保在合法合规的前提下使用本代码。 目录 引言项目背景项目设置代码分析 导入所需模块定义邮件发送函数发送邮件 实现步骤结语全部代码…...
smb cifs samba smbpasswd 笔记241127
smb cifs samba smbpasswd 笔记241127 SMB、CIFS和Samba都是与文件共享相关的技术，它们在不同的层面上发挥着作用。以下是关于SMB、CIFS和Samba的详细解释： SMB（Server Message Block） 定义：SMB（Server …...
)
Spring MVC练习(前后端分离开发实例)
White graces：个人主页 🙉专栏推荐:Java入门知识🙉 🐹今日诗词:二十五弦弹夜月，不胜清怨却飞来🐹 ⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏 ⛳️点赞 ☀️收藏⭐️关注Ǵ…...
的工程)
使用 pycharm 新建不使用 python 虚拟环境( venv、conda )的工程
有时候我们发现一个好玩的 demo，想赶快在电脑上 pip install 一下跑起来，发现因为 python 的 venv、conda 环境还挺费劲的，因为随着时间的发展，之前记得很清楚的 venv、conda 的用法，不经常使用，半天跑不起…...
英语知识网站开发：Spring Boot框架应用
3系统分析 3.1可行性分析 通过对本英语知识应用网站实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本英语知识应用网站采用SSM框架，JAVA作为开发语…...
Pandas 数据读取与导出
Pandas 是一个强大的 Python 库，用于数据处理和分析。它提供了许多函数来读取和导入数据，支持多种文件格式，如 CSV、Excel、SQL 数据库、JSON 等。以下是一些常用的数据读取和导出方法： 常用方法 格式文件格式读取函数写入&…...
Day49 | 动态规划 ：线性DP 判断子序列两个字符串的删除操作
Day49 | 动态规划 ：线性DP 判断子序列&&两个字符串的删除操作 动态规划应该如何学习？-CSDN博客 动态规划学习： 1.思考回溯法（深度优先遍历）怎么写 注意要画树形结构图 2.转成记忆化搜索 看哪些地方是重复…...
HDR视频技术之三：色度学与颜色空间
HDR 技术的第二个理论基础是色度学。从前面的内容中可以了解到，光学以及人类视觉感知模型为人类提供了解释与分析人类感知亮度的理论基础，但是 HDR 技术不仅仅关注于提升图像与视频的亮度范围，同时也关注于提供更加丰富的色彩。因此ÿ…...
nginx和netcore加载常见的3D模型
背景 数字孪生带火了3D版的Web世界，3D模型格式也是众多，常见的glb适合web传输，fbx，gltf，obj，unity等常用于模型编辑和处理。我们在用netcore或者wasm加载这些3D模型文件时，一般都需要手工增加M…...
ABAP开发学习——标准GUI状态模板的复制
补充一下创建了GUI状态后复制标准状态的方法 首先创建GUI状态 此时按钮全部都是空的 点击顶部的附加-调整模板 选择列表查看器 应用成功，下一步点击激活即可 另外需要注意，功能键中的三个图标的代码并不是习惯性写的”BACK、EXIT、CANCEL",在这个标…...
酷！用豆包MarsCode 写了一个五子棋小游戏
作者：一起重学前端 前言 2017 年，当时大学三本毕业前端工作一年，去深圳找工作面试，在拉勾上海投，接到某公司前端开发团队回复询问邮箱账号，喜滋滋的以为可以有面试了。一看邮箱，抛给我一道面试…...
IntelliJ IDEA 中，自动导包功能
在 IntelliJ IDEA 中，自动导包功能可以极大地提高开发效率，减少手动导入包所带来的繁琐和错误。以下是如何在 IntelliJ IDEA 中设置和使用自动导包功能的详细步骤： 一、设置自动导包 打开 IntelliJ IDEA： 启动 IntelliJ IDEA 并打…...
c#异步编程（async/await）
注：下文摘自ChatGPT，总结与案例都非常完善，可以快速理解并应用 0：使用场景 在winform界面程序中，在ui操作中涉及到一些耗时的等待操作，使用线程自己处理已经显得力不从心，如何能更好的实现&am…...
使用vcpkg自动链接tinyxml2时莫名链接其他库（例如boost）
使用vcpkg自动链接tinyxml2时莫名链接其他库（例如boost） vcpkg的自动链接功能非常方便，但在某些情况下会出现过度链接的问题。 链接错误症状 以tinyxml2为例，程序中调用tinyxml2的函数后，若vcpkg中同时存在opencv和…...
cocoscreater3.8.4生成图集并使用
1.安装texturepacker，去官网下载https://www.codeandweb.com/texturepacker 2.将图片拖动进来，即可自动生成精灵表，这里输出选用cocos2d-x，打包用免费版的“基本”就行，高级模式是收费的，然后点击“发布精…...
Ettercap工具使用说明
文章目录 Ettercap 简介Ettercap 的主要功能Ettercap 的安装在 Kali Linux（或基于 Debian 的系统）上安装：在其他操作系统上： Ettercap 的使用方式1. 基本模式2. MITM 攻击ARP 欺骗DNS 欺骗 3. 嗅探模式 常用插件防御建议 Ettercap…...
Linux 如何创建逻辑卷并使用
一、逻辑卷的介绍 生成环境中逻辑卷使用率很高 逻辑卷的诞生：如果对磁盘直接使用fdisk分区，那么这中分区，我们叫做Linux的标准分区，Linux的标准分区格式化成文件系统之后，挂载使用，那么一旦文件系统的空间…...
laravel-operate
php artisan cache:clear php artisan config:clear php artisan route:clear php artisan view:clear 1、查看artisan所有命令； php artisan list 2、查看命令描述及参数和选项； php artisan（n.工匠、技工） help migration&…...
探索Python WebSocket新境界：picows库揭秘
文章目录 探索Python WebSocket新境界：picows库揭秘第一部分：背景介绍第二部分：picows库概述第三部分：安装picows库第四部分：简单库函数使用方法第五部分：场景应用第六部分：常见Bug及解决方案第…...
海康VsionMaster学习笔记（学习工具+思路）
一、前言 VisionMaster算法平台集成机器视觉多种算法组件，适用多种应用场景，可快速组合算法，实现对工件或被测物的查找测量与缺陷检测等。VM算法平台依托海康威视在图像领域多年的技术积淀，自带强大的视觉分析工具库，可…...
Java面试题、八股文——JVM篇最终篇
1.如何选择垃圾收集器？ 选择合适的垃圾收集器（Garbage Collector, GC）对于优化Java应用程序的性能至关重要。不同的应用场景和系统需求可能需要不同类型的垃圾收集器来满足。以下是一些考虑因素以及常见的垃圾收集器选项，帮助您做…...
C++ 11重点总结2
1C11多线程 主要对少用的知识点进行详细描述，用的多的就给示例。照猫画虎 #include<thread> // 默认构造函数 thread() // 初始化构造函数 template<class Fn, class... Args> explicit thread(Fn&& fn, Args&&... args) // 移动构造…...
什么是 C++ 中的函数对象？它有什么特点？
在 C 中，函数对象（Function Object）是一种可调用对象，它允许像函数一样被调用，但实际上它可能并不是真正的函数。函数对象可以是以下几种类型之一： 普通函数： 一个普通的、定义在命名空间或类…...
Golang 反射
一、Go反射的应用场景 （一）对象序列化和反序列化 场景描述 在处理网络通信，数据存储等场景中，需要将对象转换为字节流（序列化）以便传输或存储，在接收端再将字节流转换回对象（反序列…...
)
hhdb数据库介绍(10-7)
OEM管理 为方便更换管理平台的产品Logo以及产品名称信息。引入“OEM管理功能”对外提供可视化更新Logo以及产品名称信息的入口。 功能入口： 具有管理权限的用户登录平台，通过 OEM管理的超链接进入功能页面，超链接路径需要在原访问页面url的…...
RabbitMQ的预取值详解
RabbitMQ的预取值（Prefetch Value）是一个关键概念，它决定了消费者在从队列中获取消息时，一次性可以获取的消息数量。这一机制对于优化消息分发和消费者的负载均衡至关重要。 什么是RabbitMQ的预取值？ 预取值是指消费者…...
mysql 触发器进入历史
一、触发器 MySQL 触发器（Triggers）是一种数据库对象，它与表关联，能在特定的事件（如插入、更新或删除）发生时自动执行一些指定的操作。使用触发器可以帮助我们自动维护数据库的完整性、一致性，…...
通过数巅能源大模型降本增效
在能源行业中，数据的有效利用对于企业的决策和运营至关重要。随着业务的发展，企业面临着数据分散、数据分析效率低、报告生成耗时等问题，制约了企业的发展和竞争力的提升。 数巅能源大模型解决方案 数巅科技推出了能源大模型解决方案&#x…...
如何编写出色的技术文档
目录 编辑 1. 明确文档目的和受众 目的的重要性 了解受众 2. 收集和组织信息 信息收集的技巧 组织信息 3. 规划文档结构 结构规划的重要性 结构规划的步骤 4. 编写内容 语言和风格 内容的组织 编写技巧 5. 审阅和测试 审阅的重要性 测试的必要性 6. 版本控…...
)
摄像头原始数据读取——gstreamer(gst_parse_launch)
摄像头原始数据读取——gstreamer(gst_parse_launch) #include <stdio.h> #include <string.h> #include <stdlib.h>#ifdef __cplusplus extern "C" { #endif#include <gst/gst.h>#ifdef __cplusplus }; #endifstatic gboolean bus_msg_tim…...
矩阵/矩阵乘法/特征值/特征向量的讲解
线性代数里有很多的概念，很多概念是有几何意义的，了解了几何意义可能会更好的理解各种概念及其相互之间的关系。 矩阵： 矩阵是一个变换，一个坐标系到另一个坐标系的变换。矩阵里的各个参数，代表了如何进行变换。 矩阵…...
docker-compose搭建xxl-job、mysql
docker-compose搭建xxl-job、mysql 1、搭建docker以及docker-compose2、下载xxl-job需要数据库脚本3、创建文件夹以及docker-compose文件4、坑来了5、正确配置6、验证-运行成功 1、搭建docker以及docker-compose 略 2、下载xxl-job需要数据库脚本 下载地址：https…...
《图像形态学运算全解析：原理、语法及示例展示》
简介： 本文详细介绍了图像形态学中的多种运算，包括腐蚀、膨胀、开运算、闭运算、形态学梯度运算、礼帽运算以及黑帽运算。分别阐述了各运算的原理、语法格式，并通过 Python 代码结合具体示例图片（如erode.JPG、dilate.JPG、close.…...