uniapp 实现tabbar图标凸起

news2024/12/24 9:37:02

实现tabbar图标凸起有两种,第一种是自定义tabbar,第二种就是使用官方的tabbar跟api实现,自定义在体验中不如原生的tabbar,所以我下面展示的是使用官方的tabbar跟api实现

效果如图:

左边是未选中中间的凸起,右边是选中中间凸起,有一个问题就是我们选中凸起后文字颜色没有改变,目前我还没找到解决方案,有办法的兄弟们 可以留言

代码实现

tabbar

"tabBar": {
		"borderStyle": "white",
		"backgroundColor": "white",
		"color": "#8F8F94",
		"selectedColor": "#e3b23e",
		"list": [{
				"pagePath": "pages/xxxx/xxxx",
				"iconPath": "static/uni.png",
				"selectedIconPath": "static/uni.png",
				"text": "主页"
			},
			{
				"pagePath": "pages/xxxx/xxxx",
				"iconPath": "static/uni.png",
				"selectedIconPath": "static/uni.png",
				"text": "积分榜"
			},
			{
				"pagePath": "pages/xxxx/xxxx",
				"iconPath": "static/c8.png",
				"selectedIconPath": "static/uni.png",
				"text": "订阅/下单",
				"visible": false
			},
			{
				"pagePath": "pages/xxxx/xxxx",
				"iconPath": "static/uni.png",
				"selectedIconPath": "static/uni.png",
				"text": "任务"
			},
			{
				"pagePath": "pages/xxxx/xxxx",
				"iconPath": "static/uni.png",
				"selectedIconPath": "static/uni.png",
				"text": "我的账户"
			}
		],
		"midButton": {
			"iconPath": "static/c8.png",
			"iconWidth": "60px",
			"height": "80px",
			"text": "订阅/下单"
		}
	}

midButton  中间按钮 仅在 list 项为偶数时有效,官方说明:

 pages.json 页面路由 | uni-app官网

 监听点击中的tabbar,并修改图标为选中状态  app.vue中监听

// 点击中间按钮  
			uni.onTabBarMidButtonTap(() => {
				console.log('中间')
				uni.setTabBarStyle({
					midButton: {
						"iconPath": "static/uni.png",
						"iconWidth": "60px",
						"height": "80px",
						"text": "订阅/下单",
						"color": "red"
					}
				})
				uni.switchTab({
					url: '/pages/xxx/xxx'
				})
			})

然后在其他的tabbar list的页面监听tabbar点击,点击不是中间tabbar,为其他tabbar时 将中间tabbar又改为未选中状态

<script>
	import {
		onTabItemTap
	} from "@dcloudio/uni-app"
	import {} from 'vue';

	export default {
		setup() {
			onTabItemTap((e) => {
				uni.setTabBarStyle({
					midButton: {
						"iconPath": "static/c8.png",
						"iconWidth": "60px",
						"height": "80px",
						"text": "订阅/下单"
					}
				})
			})

			return {
			};
		}
	};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2108651.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入解密 Elasticsearch 查询优化:巧用 Profile 工具/API 提升性能

1、Elasticsearch Profile 工具介绍 在使用 ES 进行检索查询时&#xff0c;我们常常要去优化一些复杂的查询语句&#xff0c;这里 ES 结合 lucene 的生态制作了 Profile API 和图形化的 Profile 分析界面以供用户使用。 这里我们来简单讲解一下这个工具 API&#xff0c;希望能给…

全双工语音交互

文章目录 微软小冰全双工字节大模型语音交互[Language Model Can Listen While Speaking](https://arxiv.org/html/2408.02622v1) 微软小冰全双工 全双工的定义&#xff1a;一路持续的听&#xff0c;upload audio&#xff1b;一路持续的输出&#xff0c;download audio&#xf…

C#中的Graphics类和SetQuality()自定义方法

在 C# 中&#xff0c;Graphics 类是 System.Drawing 命名空间的一部分&#xff0c;它提供了一组方法和属性&#xff0c;用于在 Windows Forms 应用程序中进行二维绘图。Graphics 对象可以绘制文本、线条、曲线、形状和图像&#xff0c;并可以对它们进行变换和剪辑。 Graphics …

【JAVA入门】Day33 - Collections

【JAVA入门】Day33 - Collections 文章目录 【JAVA入门】Day33 - Collections Collections 是集合的工具类。其包含的方法如下表所示&#xff0c;其中前两个方法最为常用。 以下代码演示了如何创建集合并批量添加数据&#xff0c;然后打乱集合元素顺序&#xff0c;然后用二分法…

数据结构:(LeetCode203)移除链表元素

给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]示例 2&#xff1a; 输入&#xff1…

代码随想录:343. 整数拆分

343. 整数拆分 class Solution { public:int integerBreak(int n) {int dp[100]{0};//拆分i的最大乘积为dp[i]dp[1]1;//初始化&#xff0c;主要是为了dp[2]初始for(int i2;i<n;i){for(int j1;j<i;j){ dp[i]max(dp[i],max(j,dp[j])*max(i-j,dp[i-j]));//取最大值&#x…

深入Linux轻量级进程管理:线程创建、线程ID解析与进程地址空间页表探究

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 &#x1f6b2;Linux线程控制&#x1f40f;POSIX线程库&#x1f415;创建线程&#x1f41f;指令查看轻量级进程指令&#xff1a;ps -a…

Python(TensorFlow)和Java及C++受激发射损耗导图

&#x1f3af;要点 神经网络监督去噪预测算法聚焦荧光团和检测模拟平台伪影消除算法性能优化方法自动化多尺度囊泡动力学成像生物研究多维分析统计物距粒子概率算法 Python和MATLAB图像降噪算法 消除噪声的一种方法是将原始图像与表示低通滤波器或平滑操作的掩模进行卷积。…

汇编伪指令 GNU 风格(24)

先来看看关于标号的内容。 这里的局部标号是需要注意的。 全局标号&#xff0c;以及注释 可以不看。 来看一个例子&#xff1b; 这里的 BSYM 我不知道是什么意思。 在来看看关于伪操作的内容&#xff0c; 一般是以 . 开头的。 这是基本的一些操作。 然后是举例&#xff1a; …

前后端时间正确传递

引言&#xff1a;后端传递给前端去展示时间的时候将时间转化为String类型的时间数据去返回。此时就需要加上 JsonFormat 注解来解决这个问题。 框架环境配置中&#xff0c;时间配置为 情形一&#xff1a; 数据库字段exam_time类型为date 后端实体类中examTime类型为Date 1.前…

搭建VUE+VScode+elementUI环境遇到的问题

手把手教你搭建VUEVScodeelementUI开发环境-CSDN博客 vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本 vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本 - 知乎 更…

Django+Vue家居全屋定制系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 需要的环境3.2 Django接口层3.3 实体类3.4 config.ini3.5 启动类3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质创作者&…

虚拟机苹果系统MacOS中XCode的安装

1、背景介绍 主机系统Win11&#xff0c;虚拟机VMWare17&#xff0c;苹果系统MacOS 13.6.7 2、Xcode的在线 点击应用市场&#xff0c;输入Xcode搜索&#xff1a; 看来Xcode无法安装在macOS V13上&#xff0c;直接在线安装失败。 3、采用下载安装包的方法进行安装 解决办法参考链…

Linux操作系统下的一些常用命令分享(ubuntu16.04)

注意一般Linux命令字符与字符之间都是空格来隔开的&#xff0c;所以千万不能忘记打空格&#xff0c;而且Linux区分大小写。&#xff08;目录就是文件夹&#xff09; 1、pwd 查看当前所在目录 2、查看帮助 命令 --help 但是这个命令会把所有内容一次性全部显示我们看帮助时很…

Linux远程管理工具推荐

原文阅读:【巨人肩膀社区专栏分享】Linux远程管理工具推荐 前两天xshell不让用了&#xff0c;刚好一台新电脑要装一个远程连接工具&#xff0c;准备试试其他。网上找了一些资料整理如下。 欢迎各位看官评论区说出你在使用的工具&#xff0c;期待你的使用经验分享&#xff08;…

Git的基本使用(持续更新)

基本使用 创建仓库 命令&#xff1a;git initgit init&#xff1a;将当前文件夹作为Git仓库&#xff0c;并在该文件夹中生成一个.git目录&#xff0c;该目录包含了资源的所有元数据&#xff0c;不可修改里面的内容。 git init newWareHouse&#xff1a;新建一个newWareHouse…

JVM性能监控和调优

JVM性能监控和调优 文章目录 JVM性能监控和调优性能优化的步骤GC日志分析GC日志参数测试GC分类日志结构 OOM&#xff1a;堆溢出模拟堆溢出dump文件分析gc日志分析 OOM&#xff1a;元空间溢出模拟元空间溢出dump文件分析原因及解决方案 OOM&#xff1a;GC overhead limit exceed…

python学习第二节:安装开发工具pycharm

python学习第二节&#xff1a;安装开发工具pycharm 1.下载安装包&#xff1a;https://www.jetbrains.com/pycharm/ 点击 Download 下滑页面到下面的社区版&#xff0c;&#xff08;上面的专业版是收费的&#xff0c;下面的社区版是免费的&#xff09; 2.安装 点击安装文件 …

计算机基础知识复习9.5

数据交换 电路交换&#xff1a;交换信息的两个主机之间简历专用通道&#xff0c;传输时延小&#xff0c;实时性强&#xff0c;效率低&#xff0c;无法纠正错误。 报文交换&#xff1a;信息拆分成小包(报文&#xff09;大小无限制&#xff0c;有目的/源等信息提高利用率。有转…

C++入门项目:Linux下C++轻量级Web服务器 跑通|运行|测试(小白进)

TinyWebServer是一个开源的项目&#xff0c;适合小白入门C网络编程&#xff0c;注意该项目是在linux系统下。 Linux下C轻量级Web服务器&#xff0c;助力初学者快速实践网络编程&#xff0c;搭建属于自己的服务器. 使用 线程池 非阻塞socket epoll(ET和LT均实现) 事件处理(R…