uni-app 配置tabBar 中间按钮，以及监听点击事件

最新推荐文章于 2025-04-23 15:31:11 发布

置顶

qq_44467976

最新推荐文章于 2025-04-23 15:31:11 发布

阅读量1.7w

点赞数 13

分类专栏： uni-app 项目实战开发经验文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_44467976/article/details/104203964

版权

本文介绍了如何在uni-app中配置tabBar的中间按钮，并讲解了监听中间按钮点击事件的方法。强调了配置的有效条件和关键属性如height、iconWidth，指出中间按钮不支持页面跳转，但可以通过uni.onTabBarMidButtonTap事件监听点击。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提条件：
1.中间按钮仅在 tabBar的 list 项为偶数时有效；即当有2或4个按钮时有效
2.仅支持 App 2.3.4+(HBuilder x版本)

midButton 属性说明

属性	类型	必填	默认值	描述
width	String	否	80px	中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度
height	String	否	50px	中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
text	String	否		中间按钮的文字
iconPath	String