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

uni-app动态tabBar,根据不同用户展示不同的tabBar

1.uni框架的api实现

因为我们用的是uni-app框架开发,所以在创建项目的时候直接创建uni-ui的项目即可,这个项目模板中自带了uni的一些好用的组件和api。

起初我想着这个效果不难实现,因为官方也有api可以直接使用,所以我最开始尝试就是使用uni的api完成,也就是这个:uni.setTabBarItem(options)

我也是根据官方文档一步一步做的,但是问题就是出现在该api无法将pagePath改变,导致虽然图片和其他的一些配置可以改变,但是最关键的没有该变,我想要的功能也是没有实现

 我感觉我可能是对这句话理解有误差,导致的我没有完全实现此功能,然后去Dcloud社区问答看了有人也遇到了我这个问题,但是帖子下面并没有得到解决方法,所以我就想着只能去自定义了tabbar组件来实现此功能了。

 总之这个方法并没有完全实现,如果有能解决我这个问题的大佬可以私信我,万分感谢!!!

2.组件实现

为了效率呢,我就直接采用了Vant-Weapp组件库来实现此功能了

2.1下载vant库

npm i @vant/weapp -S --production

uniapp是没有默认的包管理器的,首先要有自己建一个

npm init -y

创建好后就可以下载vant包了

2.2使用vant-tabbar需要先引入对应的文件

我们在node_modules中找到vant包将其放到根目录下,为了方便我们引入

将dist文件放到一个新文件夹中

 记住总文件夹的名字要是:wxcomponents,否则运行至微信小程序中是没有此文件的

在pages.json文件中这样引入:

 我的需求是在首页放一个登录页面,有用户user页面,admin页面,不同用户看到的页面也不同

我的页面设置是这样

 为了模拟,我在index放了二个按钮

<template><view class="content"><button type="primary" @click="goUser">user</button><button type="primary" @click="goAdmin">admin</button></view>
</template><script>export default {data() {return {}},methods: {goUser() {uni.switchTab({url: '/pages/user/user'})},goAdmin() {uni.switchTab({url: '/pages/admin/admin'})}}}
</script>

现在配置pages.json中的tabbar

 这里就给出user中的例子来说明,admin中逻辑是一样的

user.vue

<template><view>user<van-tabbar :active="active" @change="onChange"><van-tabbar-item icon="home-o" @click="goSwitch('/pages/user/user')">user</van-tabbar-item><van-tabbar-item icon="search" @click="goSwitch('/pages/user_1/user_1')">user_1</van-tabbar-item></van-tabbar></view>
</template><script>export default {data() {return {active: 0 //高亮的图标的标}},onShow() {this.active = 0  //为了防止tabbar图标高亮切换卡顿问题uni.hideTabBar() //隐藏掉原始的tabbar},methods: {onChange(e) {this.active = e.detail},goSwitch(url) {uni.switchTab({url: url})}}}
</script><style></style>

user_1.vue

<template><view>user1<van-tabbar :active="active" @change="onChange"><van-tabbar-item icon="home-o" @click="goSwitch('/pages/user/user')">user</van-tabbar-item><van-tabbar-item icon="search" @click="goSwitch('/pages/user_1/user_1')">user_1</van-tabbar-item></van-tabbar></view>
</template><script>export default {data() {return {active: 0}},onShow() {this.active = 1uni.hideTabBar()},methods: {onChange(e) {this.active = e.detail},goSwitch(url) {uni.switchTab({url: url})}}}
</script><style></style>

然后这种功能就实现了

 

相关文章:

uni-app动态tabBar,根据不同用户展示不同的tabBar

1.uni框架的api实现 因为我们用的是uni-app框架开发&#xff0c;所以在创建项目的时候直接创建uni-ui的项目即可&#xff0c;这个项目模板中自带了uni的一些好用的组件和api。 起初我想着这个效果不难实现&#xff0c;因为官方也有api可以直接使用&#xff0c;所以我最开始尝试…...

手写Spring:第6章-资源加载器解析文件注册对象

文章目录 一、目标&#xff1a;资源加载器解析文件注册对象二、设计&#xff1a;资源加载器解析文件注册对象三、实现&#xff1a;资源加载器解析文件注册对象3.1 工程结构3.2 资源加载器解析文件注册对象类图3.3 类工具类3.4 资源加载接口定义和实现3.4.1 定义资源加载接口3.4…...

Redis 7 第八讲 集群模式(cluster)架构篇

集群架构 Redis 集群架构图 集群定义 Redis 集群是一个提供在多个Redis节点间共享数据的程序集;Redis集群可以支持多个master 应用场景 Redis集群支持多个master,每个master又可以挂载多个slave读写分离支持数据的高可用支持海量数据的读写存储操作集群自带Sentinel的故障…...

【PowerQuery】导入与加载XML

在标准数据格式类型里面,有一类比较特殊的数据类型,就是层次结构数据。层次结构数据和标准的结构型数据方式完全不同,在实际应用过程中使用最为频繁的几种数据类型如下。 XML数据格式Json 数据格式Yaml 数据格式我们将在本节和大家一起分享下XML格式数据集成,下一节和大家分…...

vue 预览视频

1.预览本地文件 1.1 直接给video或者embed的src赋值本地路径 <video :src"videoUrl"></video> // 或者 使用embed标签<embed :src"videoUrl" /> 1.2 读取文件流形式 <input type"file" ref"file" /> <vi…...

4个维度讲透ChatGPT技术原理,揭开ChatGPT神秘技术黑盒!(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

【无标题】@Scheduled 的cron

, &#xff1a;指定多个值。 -&#xff1a;表示一个区间。 / &#xff1a;指定一个值的增加幅度。n/m表示从n开始&#xff0c;每次增加m。 L&#xff1a;是last的缩写&#xff0c;表示最后一天&#xff0c;用在日表示一个月中的最后一天&#xff0c;用在周表示每周最后一天&…...

IP和MAC的作用区别

在 IP 地址的上一行是 link/ether fa:16:3e:c7:79:75 brd ff:ff:ff:ff:ff:ff&#xff0c;这个被称为 MAC 地址&#xff0c;是一个网卡的物理地址&#xff0c;用十六进制&#xff0c;6 个 byte 表示。 一个网络包要从一个地方传到另一个地方&#xff0c;除了要有确定的地址&…...

python趣味编程-数独游戏

数独游戏是一个用Python编程语言编写的应用程序。该项目包含可以显示实际应用程序的基本功能。该项目可以让修读 IT 相关课程并希望开发简单应用程序的学生受益。这个Python 数独游戏是一个简单的项目,可用于学习tkinter库的实践。这个数独游戏可以提供Python编程的基本编码技…...

MySQL/MariaDB 查询某个 / 多个字段重复数据

创建测试表和数据 # 创建表 create table if not exists t_duplicate (name varchar(255) not null,age int not null );# 插入测试数据 insert into t_duplicate(name, age) values(a, 1); insert into t_duplicate(name, age) values(a, 2);查询单个字段重复 使用 count() …...

【力扣每日一题】2023.9.10 课程表Ⅱ

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 今天的题目和昨天类似&#xff0c;不过今天要我们求出学习所有课程的先后顺序。 昨天只需要我们求出能否学习完所有课程&#xff0c;因此…...

VSCODE CMAKE C++ 工程调试, C++不以科学计数法输出并控制小数位数

1. VSCODE调试CMAKE工程配置1.1 修改CMakeLists.txt文件1.2. 程序中1.3. launch.json配置1.4 开始调试1.5 注意 2. C设置输出浮点数且保留位数固定 1. VSCODE调试CMAKE工程配置 1.1 修改CMakeLists.txt文件 加这一句 set(CMAKE_BUILD_TYPE "Debug")1.2. 程序中 在…...

Drools规则引擎入门学习记录

业务开发过程中&#xff0c;对于某些判断性的通用规则是基于if-else封装&#xff0c;还是基于策略模式封装&#xff1f;无论以上那种封装出来的方法&#xff0c;只能在单体软件包中共用&#xff0c;且不能无感部署&#xff0c;然而对于业务而言&#xff0c;可能规则改变的比较频…...

肖sir__设计测试用例方法之判定表06_(黑盒测试)

设计测试用例方法之判定表 1、判定表&#xff1a;是一种表达逻辑判断的工具。 2、判定表&#xff1a;包含四部分 1&#xff09;条件桩&#xff08;condition stub&#xff09;:列出问题的 所有条件&#xff08;通常条件次序无关紧要&#xff09;。 2&#xff09;条件项&#x…...

<图像处理> 空间滤波基础

空间滤波基础 图像滤波是一种常见的图像处理技术&#xff0c;用于平滑图像、去除噪音和边缘检测等任务。图像滤波的基本原理是在进行卷积操作时&#xff0c;通过把每个像素的值替换为该像素及其邻域的设定的函数值来修改图像。 预备知识&#xff1a;可分离滤波核、边缘填充。…...

如何在Django中使用django-crontab启动定时任务、关闭任务以及关闭指定任务

安装django-crontab包: pip install django-crontab 在Django项目的settings.py文件中&#xff0c;找到INSTALLED_APPS配置&#xff0c;并添加django_crontab到列表中: INSTALLED_APPS [ ... django_crontab,... ] 在settings.py文件的末尾&#xff0c;添加以下配置以设…...

mysql配置项整理

二、&#xff1a;mysql服务器参数 general 基础配置 datadir/var/lib/mysql #数据文件存放的目录 socket/var/lib/mysql/mysql.sock #mysql.socket表示server和client在同一台服务器&#xff0c;并且使用localhost进行连接&#xff0c;就会使用socket进行连接 pid_file/v…...

【KRouter】一个简单且轻量级的Kotlin Routing框架

【KRouter】一个简单且轻量级的Kotlin Routing框架 KRouter&#xff08;Kotlin-Router&#xff09;是一个简单而轻量级的Kotlin路由框架。 具体来说&#xff0c;KRouter是一个通过URI来发现接口实现类的框架。它的使用方式如下&#xff1a; val homeScreen KRouter.route&l…...

时间管理类书籍阅读笔记

背景 这段时间看了时间管理方面的书籍&#xff0c;大部分和早晨时间利用相关。之所以有了利用早晨时间的想法&#xff0c;是某天下班后&#xff0c;感觉很疲惫&#xff0c;什么都不想做&#xff0c;于是就打了一晚上游戏&#xff0c;然后第二天重复着这样的生活。 突然意识到…...

CSS文字居中对齐学习

CSS使用text-align属性设置文字对齐方式&#xff1b;text-align:center&#xff0c;这样就设置了文字居中对齐&#xff1b; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>css 水平居中</title><style>.box …...

开源LoRA模型落地实操:Z-Image-Turbo+孙珍妮风格的Gradio快速调用教程

开源LoRA模型落地实操&#xff1a;Z-Image-Turbo孙珍妮风格的Gradio快速调用教程 想用AI生成特定风格的明星写真&#xff0c;但觉得在线服务限制多、效果不可控&#xff1f;自己部署模型又担心太复杂&#xff1f;今天&#xff0c;我们就来解决这个问题。 我将带你一步步&…...

2025年深度评测:掌握Liebling主题,解锁Ghost博客的现代设计潜力

2025年深度评测&#xff1a;掌握Liebling主题&#xff0c;解锁Ghost博客的现代设计潜力 【免费下载链接】liebling Beautiful and clean Ghost theme that is easy and comfortable to use. To get the latest version please head over the releases page &#x1f449;&#…...

LeetCode 111. Minimum Depth of Binary Tree 题解

LeetCode 111. Minimum Depth of Binary Tree 题解 题目描述 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输…...

Asp.Net MVC杂谈之:—步步打造表单验证框架[重排版](1)

在实际使用中,我们可以考虑多种形式来进行这一验证(注:本文目前只研究服务器端验证的情况),最直接的方式莫过于对每个表单值手动用C#代码进行验证了,比如: if(!Int32.TryParse(Request.Form[“age”], out age)){ xxxx… } If(age < xxx || age > xxx){ xxxx… }…...

2016-2025年地级市链长制数据

在产业链现代化与协同治理进程中&#xff0c;“链长制”作为一项关键的制度创新&#xff0c;为破解产业链条松散、协同不足等问题提供了重要抓手&#xff0c;其政策效果与影响机制成为当前学术研究与政策制定的焦点议题。周钰丁、田思远在研究中指出&#xff0c;产业链“链长制…...

如何让Windows 11告别臃肿?Win11Debloat完整指南帮你一键优化系统

如何让Windows 11告别臃肿&#xff1f;Win11Debloat完整指南帮你一键优化系统 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declu…...

Qt实战:用QCustomPlot+QThread搞定工业级实时数据大屏(附缓存池模板)

Qt工业级实时数据大屏开发实战&#xff1a;QCustomPlot与QThread的高效协同 在工业自动化领域&#xff0c;数据可视化大屏已成为监控产线状态的核心工具。面对每秒数十万数据点的实时刷新需求&#xff0c;传统Qt绘图方案往往力不从心。本文将分享如何基于QCustomPlot和QThread构…...

不只是安装:深入理解TI毫米波雷达开发套件(MMWCAS-RF-EVM)的软件生态与数据流

不只是安装&#xff1a;深入理解TI毫米波雷达开发套件&#xff08;MMWCAS-RF-EVM&#xff09;的软件生态与数据流 毫米波雷达技术正在重塑自动驾驶、工业检测和智能安防等领域&#xff0c;而TI的MMWCAS-RF-EVM评估板作为行业标杆工具&#xff0c;其真正的价值往往被简化为"…...

LeetCode 11. Container With Most Water 题解

LeetCode 11. Container With Most Water 题解 题目描述 给你 n 个非负整数 a1&#xff0c;a2&#xff0c;...&#xff0c;an&#xff0c;每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线&#xff0c;垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) 。找出其中的两条…...

告别Swagger注解污染:用smart-doc + Maven插件5分钟生成整洁API文档(SpringBoot实战)

零侵入API文档革命&#xff1a;smart-doc在SpringBoot项目中的极致实践 如果你曾经被Swagger注解污染代码所困扰&#xff0c;或是厌倦了在业务逻辑中嵌入大量文档相关注解&#xff0c;那么smart-doc可能会成为你API文档管理的新选择。作为一款基于源码解析的文档生成工具&#…...