微信小程序案例 - 自定义 tabBar

一、前言：为什么需要自定义 tabBar？

微信小程序原生 tabBar 虽然简单易用，但存在明显限制：

• ❌ 不支持中间"+"号等凸起按钮
• ❌ 图标和文字样式无法高度自定义（如选中态动画）
• ❌ 无法动态隐藏/显示 tabBar
• ❌ 不能嵌入徽标（Badge）、红点等业务元素

解决方案 ：使用自定义 tabBar！

本文将带你从零实现一个支持中间凸起按钮、带动画、可扩展的自定义 tabBar，并封装为通用组件。

---

二、最终效果预览

✅ 底部 5 个 tab（中间为"+"发布按钮）

✅ 点击 tab 平滑切换页面

✅ 中间按钮跳转独立功能页（如发布内容）

✅ 支持徽标、选中高亮、图标切换

---

三、实现原理

由于小程序页面是全屏渲染，我们无法像 H5 那样用 fixed 布局直接覆盖原生 tabBar。

正确做法：

1. 关闭原生 tabBar （app.json 中不配置 tabBar）
2. 每个页面底部手动引入自定义 tabBar 组件
3. 通过 wx.switchTab 或 wx.navigateTo 模拟 tab 切换

⚠️ 注意：自定义 tabBar 不是全局组件，需在每个 tab 页面中手动引入！

---

四、第一步：创建自定义 tabBar 组件

1. 目录结构

components/
└── custom-tab-bar/
    ├── custom-tab-bar.js
    ├── custom-tab-bar.json
    ├── custom-tab-bar.wxml
    └── custom-tab-bar.wxss

---

2. 配置组件（custom-tab-bar.json）

{
  "component": true,
  "usingComponents": {}
}

---

3. 定义数据与方法（custom-tab-bar.js）

// components/custom-tab-bar/custom-tab-bar.js
Component({
  properties: {
    current: {
      type: Number,
      value: 0
    }
  },

  data: {
    // tab 配置（可抽离为常量）
    tabs: [
      { pagePath: "/pages/home/index", text: "首页", icon: "home", selectedIcon: "home-fill" },
      { pagePath: "/pages/category/index", text: "分类", icon: "category", selectedIcon: "category-fill" },
      { pagePath: "/pages/publish/index", text: "", icon: "add", isCenter: true }, // 中间按钮
      { pagePath: "/pages/cart/index", text: "购物车", icon: "cart", selectedIcon: "cart-fill" },
      { pagePath: "/pages/my/index", text: "我的", icon: "my", selectedIcon: "my-fill" }
    ]
  },

  methods: {
    switchTab(e) {
      const { index } = e.currentTarget.dataset;
      const item = this.data.tabs[index];

      if (item.isCenter) {
        // 中间按钮：跳转非 tab 页（如发布页）
        wx.navigateTo({ url: '/pages/publish/index' });
        return;
      }

      // 普通 tab：切换页面
      wx.switchTab({ url: item.pagePath });

      // 可选：触发父页面更新 current
      this.triggerEvent('change', { index });
    }
  }
});

💡 提示：图标建议使用字体图标（如 IconFont）或本地 PNG

---

4. 编写模板（custom-tab-bar.wxml）

<!-- components/custom-tab-bar/custom-tab-bar.wxml -->
<view class="tab-bar">
  <view 
    wx:for="{{tabs}}" 
    wx:key="index"
    class="tab-item {{item.isCenter ? 'center-btn' : ''}} {{current === index ? 'active' : ''}}"
    data-index="{{index}}"
    bindtap="switchTab"
  >
    <view class="icon">
      <image 
        src="/assets/icons/{{current === index ? item.selectedIcon : item.icon}}.png" 
        mode="aspectFit"
        class="icon-img"
      />
      <!-- 示例：购物车徽标 -->
      <view wx:if="{{index === 3 && cartCount > 0}}" class="badge">{{cartCount}}</view>
    </view>
    <text wx:if="{{!item.isCenter}}" class="tab-text">{{item.text}}</text>
  </view>
</view>

---

5. 编写样式（custom-tab-bar.wxss）

/* components/custom-tab-bar/custom-tab-bar.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: white;
  border-top: 1px solid #eee;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.center-btn {
  position: relative;
  top: -40rpx; /* 凸起效果 */
  width: 120rpx;
  height: 120rpx;
  background: #007aff;
  border-radius: 50%;
  box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.3);
}

.center-btn .icon-img {
  width: 56rpx;
  height: 56rpx;
}

.icon-img {
  width: 48rpx;
  height: 48rpx;
}

.tab-text {
  font-size: 20rpx;
  margin-top: 8rpx;
  color: #888;
}

.active .tab-text {
  color: #007aff;
}

.badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #ff3b30;
  color: white;
  border-radius: 50%;
  min-width: 24rpx;
  height: 24rpx;
  font-size: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rpx;
}

---

五、第二步：在页面中使用 tabBar

1. 页面 JSON 引入组件

// pages/home/index.json
{
  "usingComponents": {
    "custom-tab-bar": "/components/custom-tab-bar/custom-tab-bar"
  }
}

2. 页面 WXML 使用

<!-- pages/home/index.wxml -->
<view class="page-container">
  <!-- 页面内容 -->
  <view>首页内容</view>
</view>

<!-- 底部 tabBar -->
<custom-tab-bar current="0" bindchange="onTabChange" />

⚠️ 注意：每个 tab 页面都要引入，并传入对应的 current（0,1,3,4）

---

3. 页面 JS 处理（可选）

// pages/home/index.js
Page({
  data: {
    cartCount: 5 // 示例：从全局状态获取
  },

  onTabChange(e) {
    // 如果需要同步 current（一般不需要）
    console.log('切换到 tab:', e.detail.index);
  }
});

---

六、关键问题解答

Q1：中间按钮为什么用 navigateTo 而不是 switchTab？

A：因为 switchTab 只能跳转到 app.json 中配置的 tabBar 页面，而发布页通常不是 tab 页面 ，所以用 navigateTo。

Q2：如何动态更新徽标（如购物车数量）？

A：可通过全局状态（如 globalData、Event Bus 或 Store）传递数据到 tabBar 组件。

Q3：页面内容被 tabBar 遮挡怎么办？

A：在页面最外层加 padding-bottom: 100rpx + safe-area：

.page-container {
  min-height: 100vh;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

---

七、进阶优化建议

1. 图标使用字体图标：减少图片请求，支持颜色动态修改
2. 动画效果 ：点击时添加 scale 动画（transform: scale(0.9)）
3. 状态管理 ：将 cartCount 等数据通过 Store 统一管理
4. 适配 iPhone X ：使用 env(safe-area-inset-bottom) 避免遮挡

---

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！