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

关键配置说明：

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