在 UniApp 中实现中间凸起 TabBar 的完整指南_uniapp底部导航栏中间凸起

如何在 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\": \"我的\" } ] }}

关键配置说明：

1. midButton 属性：

   • iconPath：中间按钮的图标路径。
   • height：中间按钮的高度，设置为大于其他 TabBar 项的高度即可实现凸起效果。
   • iconWidth：图标的宽度，高度会等比例缩放。
   • 注意：midButton 没有 pagePath，需要通过监听点击事件自定义行为。

2. 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>

关键点：

1. uni.onTabBarMidButtonTap：

   • 用于监听中间按钮的点击事件。
   • 在回调函数中编写自定义逻辑，例如跳转到指定页面。

2. 跳转页面：

   • 使用 uni.navigateTo 跳转到目标页面。
   • 如果需要跳转到 TabBar 页面，可以使用 uni.switchTab。

四、注意事项

1. 图标尺寸：

   • 中间按钮的图标尺寸需要根据设计稿调整，确保显示效果符合预期。

2. 凸起高度：

   • midButton 的 height 属性决定了凸起的高度，建议根据实际需求调整。

3. 兼容性：

   • midButton 是 UniApp 提供的特性，确保使用的 UniApp 版本支持该功能。

4. 自定义样式：

   • 如果需要更复杂的样式（如背景图、字体图标等），可以通过 backgroundImage 和 iconfont 属性实现。

五、总结

通过 UniApp 的 midButton 属性，我们可以轻松实现中间凸起的 TabBar 效果。关键步骤如下：

1. 在 pages.json 中配置 tabBar，设置 midButton 的高度和图标。
2. 使用 uni.onTabBarMidButtonTap 监听中间按钮的点击事件，并自定义行为。
3. 根据需求调整图标尺寸、凸起高度等样式。

希望本文能帮助你快速实现中间凸起的 TabBar 效果！如果有任何问题，欢迎留言讨论。