如何在 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 效果！如果有任何问题，欢迎留言讨论。
