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

关键配置说明：

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