如何在 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。