在 UniApp 中实现中间凸起 TabBar 的完整指南
如何在 UniApp 中设置中间 TabBar 凸起效果
在移动应用开发中,TabBar 是常见的导航组件,而中间凸起的 TabBar 按钮则是一种流行的设计风格,常用于突出重要功能(如发布、拍照等)。UniApp 提供了 midButton 属性,可以轻松实现这种效果。本文将详细介绍如何在 UniApp 中配置中间凸起的 TabBar,并处理其点击事件。
一、实现效果
我们将实现一个带有中间凸起按钮的 TabBar,效果如下:
- 中间按钮高度大于其他 TabBar 项,形成凸起效果。
- 中间按钮没有
pagePath,需要通过监听点击事件自定义行为。 - 其他 TabBar 项正常跳转页面。
二、配置 TabBar
在 pages.json 中配置 tabBar,具体代码如下:
{"tabBar": {"color": "#b1b6bd", // 默认颜色"selectedColor": "#2E3A71", // 选中颜色"borderStyle": "black", // 边框样式"backgroundColor": "#fff", // 背景颜色"midButton": {"iconPath": "/static/images/communication/communication.png", // 中间按钮图标"height": "65px", // 中间按钮高度(大于其他项高度)"iconWidth": "56px" // 图标宽度},"list": [{"pagePath": "pages/home/home", // 首页页面路径"iconPath": "static/images/home/home.png", // 默认图标"selectedIconPath": "static/images/home/home_active.png", // 选中图标"text": "首页" // 文字},{"pagePath": "pages/notification/notification","iconPath": "static/images/notification/notification.png","selectedIconPath": "static/images/notification/notification_active.png","text": "客户"},{"pagePath": "pages/shop/likeShop/likeShop","iconPath": "static/images/shop/shop.png","selectedIconPath": "static/images/shop/shop_active.png","text": "工单"},{"pagePath": "pages/my/my","iconPath": "static/images/my/my.png","selectedIconPath": "static/images/my/my_active.png","text": "我的"}]}
}
关键配置说明:
-
midButton属性:iconPath:中间按钮的图标路径。height:中间按钮的高度,设置为大于其他 TabBar 项的高度即可实现凸起效果。iconWidth:图标的宽度,高度会等比例缩放。- 注意:
midButton没有pagePath,需要通过监听点击事件自定义行为。
-
list属性:- 配置其他 TabBar 项的页面路径、图标和文字。
三、监听中间按钮点击事件
由于 midButton 没有 pagePath,我们需要通过 UniApp 提供的 API uni.onTabBarMidButtonTap 监听其点击事件,并自定义行为。
在项目的入口文件(如 App.vue)中添加以下代码:
<script>
export default {onLaunch() {// 监听中间按钮点击事件uni.onTabBarMidButtonTap(() => {console.log('中间按钮被点击');// 自定义行为,例如跳转到指定页面uni.navigateTo({url: '/pages/publish/publish' // 跳转到发布页面});});}
};
</script>
关键点:
-
uni.onTabBarMidButtonTap:- 用于监听中间按钮的点击事件。
- 在回调函数中编写自定义逻辑,例如跳转到指定页面。
-
跳转页面:
- 使用
uni.navigateTo跳转到目标页面。 - 如果需要跳转到 TabBar 页面,可以使用
uni.switchTab。
- 使用
四、注意事项
-
图标尺寸:
- 中间按钮的图标尺寸需要根据设计稿调整,确保显示效果符合预期。
-
凸起高度:
midButton的height属性决定了凸起的高度,建议根据实际需求调整。
-
兼容性:
midButton是 UniApp 提供的特性,确保使用的 UniApp 版本支持该功能。
-
自定义样式:
- 如果需要更复杂的样式(如背景图、字体图标等),可以通过
backgroundImage和iconfont属性实现。
- 如果需要更复杂的样式(如背景图、字体图标等),可以通过
五、总结
通过 UniApp 的 midButton 属性,我们可以轻松实现中间凸起的 TabBar 效果。关键步骤如下:
- 在
pages.json中配置tabBar,设置midButton的高度和图标。 - 使用
uni.onTabBarMidButtonTap监听中间按钮的点击事件,并自定义行为。 - 根据需求调整图标尺寸、凸起高度等样式。
希望本文能帮助你快速实现中间凸起的 TabBar 效果!如果有任何问题,欢迎留言讨论。
相关文章:
在 UniApp 中实现中间凸起 TabBar 的完整指南
如何在 UniApp 中设置中间 TabBar 凸起效果 在移动应用开发中,TabBar 是常见的导航组件,而中间凸起的 TabBar 按钮则是一种流行的设计风格,常用于突出重要功能(如发布、拍照等)。UniApp 提供了 midButton 属性&#x…...
Redis大key
Redis大key基本概念,影响 Redis 大 key 指在 Redis 中存储了大量数据的键,它会对 Redis 的性能和内存管理产生影响。 大key的定义与value的大小和元素数量有关,但这个定义并不是绝对的,而是相对的,具体取决于系统的使用…...
WPF高级 | WPF 与数据库交互:连接、查询与数据更新
WPF高级 | WPF 与数据库交互:连接、查询与数据更新 前言一、数据库交互基础概念1.1 数据库简介1.2 数据访问技术 二、WPF 与数据库连接2.1 连接字符串2.2 建立连接 三、WPF 中的数据查询3.1 使用ADO.NET进行数据查询3.2 使用 Entity Framework 进行数据查询3.3 使用…...
CogBlobTool工具
CogBlobTool是一款专用于图像斑点检测于分析的 工具,通过灰度值阈值分割和特征过滤,帮助在复杂背景中提取目标区域,并计算几何属性。 效果图 注意:在这里只有一张图像可以不使用模板匹配工具 CogBlobTool工具的功能 斑点检测于…...
C# WinForm程序中如何调试dll接口
公司的SF系统是自主开发的。不同的机种会有不同数据记录保存的需求,尤其是客户SQE更是各种奇思妙想......于是做了一个接口,实践之下效果还不错呢。 每每总是忘记怎么调试接口,特记录下备查。首先要将, 1 DLL项目与WinForms项目…...
自然语言处理:词频-逆文档频率
介绍 大家好,博主又来给大家分享知识了。本来博主计划完成稠密向量表示的内容分享后,就开启自然语言处理中文本表示的讲解。可在整理分享资料的时候,博主发现还有个知识点,必须得单独拎出来好好说道说道。 这就是TF-IDF…...
【银河麒麟高级服务器操作系统】服务器测试业务耗时问题分析及处理全流程分享
更多银河麒麟操作系统产品及技术讨论,欢迎加入银河麒麟操作系统官方论坛 https://forum.kylinos.cn 了解更多银河麒麟操作系统全新产品,请点击访问 麒麟软件产品专区:https://product.kylinos.cn 开发者专区:https://developer…...
基于大数据的民宿旅馆消费数据分析系统
【大数据】基于大数据的民宿旅馆消费数据分析系统(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统可以揭示民宿市场的消费模式和价格分布情况,帮助理解消费者偏好、价格走势及…...
Spring-AI搭建企业专属知识库 一
环境介绍:Spring3.3.2 JDK 21 POM文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation&…...
极简本地体验deepseek大模型教程
一 题外随感:时代之问 就像狄更斯在双城记中所述,“这是最好的时代,这是最坏的时代”。每一代人都有其所处的时代,每一个时代都有其所谓好的一面和不那么好的一面。很多时候随口的一句大环境不好,就似乎给了自己一个最…...
RabbitMQ系列(五)基本概念之Queue
在 RabbitMQ 中,Queue(队列) 是存储消息的容器,也是消息传递的核心载体。以下是其核心特性与作用的全方位解析: 一、Queue 的定义与核心作用 消息存储容器 Queue 是 RabbitMQ 中实际存储消息的实体,生产者…...
【记录】成为创作者的第 730 天(两年)
收获 还是总在感叹走到今天收获的一切,都是自己曾经不敢想的。 无论是靠自己努力拿到的 Offer,还是在 CSDN 网站上结交的网友和前辈们,都是我莫大的荣幸和财富,感恩一切、感恩自己。 过去一年的收获真的数不胜数,抛…...
深度剖析数据分析职业成长阶梯
一、数据分析岗位剖析 目前,数据分析领域主要有以下几类岗位:业务数据分析师、商业数据分析师、数据运营、数据产品经理、数据工程师、数据科学家等,按照工作侧重点不同,本文将上述岗位分为偏业务和偏技术两大类,并对…...
【XSS】DVWA靶场XSS攻击
一、XSS攻击 1.1. XSS 攻击简介 XSS(Cross-Site Scripting,跨站脚本攻击)是一种常见的Web安全漏洞,它允许攻击者在受害者的浏览器中执行恶意脚本。攻击者通常通过在Web应用程序中注入恶意脚本代码(如JavaScript&…...
Fiddler在Windows下抓包Https
文章目录 1.Fiddler Classic 配置2.配置浏览器代理自动代理手动配置浏览器代理 3.抓取移动端 HTTPS 流量(可选)解决抓取 HTTPS 失败问题1.Fiddler证书过期了 默认情况下,Fiddler 无法直接解密 HTTPS 流量。需要开启 HTTPS 解密: 1…...
04 路由表的IP分组传输过程
目录 1、路由表的核心结构 2、IP分组传输过程和数据包转发过程 2.1、IP分组传输过程 2.2、数据包转发过程 2.3、IP分组传输过程和数据包转发的区别 3、数据包的变化 3.1、拓扑结构 3.2、传输过程详解(主机A → 主机B) 3.2.1、主机A发送数据 3.2…...
AI Agent 定义与核心要素详解
AI Agent(人工智能代理)是一种能够感知环境、自主决策并执行任务以达成目标的软件实体。它结合了感知、推理、学习和行动能力,能够在复杂环境中独立或协作工作。以下是其核心要素: 1. 感知 AI Agent 通过传感器或数据输入感知环…...
记忆化搜索与动态规划:原理、实现与比较
记忆化搜索和动态规划是解决优化问题的两种重要方法,尤其在处理具有重叠子问题和最优子结构性质的问题时非常有效。 目录 1. 记忆化搜索(Memoization) 定义: 实现步骤: 示例代码(斐波那契数列࿰…...
在 Mac mini M2 上本地部署 DeepSeek-R1:14B:使用 Ollama 和 Chatbox 的完整指南
随着人工智能技术的飞速发展,本地部署大型语言模型(LLM)已成为许多技术爱好者的热门选择。本地部署不仅能够保护隐私,还能提供更灵活的使用体验。本文将详细介绍如何在 Mac mini M2(24GB 内存)上部署 DeepS…...
计算机网络基础简答题资料(对口高考)
1、什么是计算机网络?计算机网络的功能有哪些? 答案:计算机网络,是指将分布在不同地理位置、具有独立功能的多台计算机及其外围设备,通过通信设备和通信线路连接起来,在网络操作系统、网络管理软件及网络通…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
