微信小程序自定义 tabBar 实战：支持凸起按钮与动态徽标

这里有个细节，图标建议使用字体图标或本地 PNG，方便后续换肤。

配置文件很简单，只需声明这是一个组件：

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

模板部分利用 wx:for 遍历数据，注意中间按钮的特殊样式处理：

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

样式方面，重点在于中间按钮的凸起效果和底部安全区适配：

/* 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;
}
.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);
}

集成到页面

每个 tab 页面都需要引入该组件。先在页面的 json 文件中注册：

{
  "usingComponents": {
    "custom-tab-bar": "/components/custom-tab-bar/custom-tab-bar"
  }
}

然后在 wxml 中调用，记得传入当前的 active 索引：

<custom-tab-bar current="0" bindchange="onTabChange" />

如果需要同步状态，可以在 js 中监听 change 事件。

常见问题处理

Q：中间按钮为什么用 navigateTo 而不是 switchTab？ A：因为 switchTab 只能跳转到 app.json 中配置的 tabBar 页面，而发布页通常不是 tab 页面，所以必须用 navigateTo。

Q：如何动态更新徽标？ A：可通过全局状态（如 globalData）、Event Bus 或 Store 传递数据到 tabBar 组件。

Q：页面内容被 tabBar 遮挡怎么办？ A：在页面最外层加 padding-bottom：calc(100rpx + env(safe-area-inset-bottom))。

性能与体验优化

图标尽量使用字体图标以减少图片请求，支持颜色动态修改。点击时添加 scale 动画能提升手感。状态管理建议将 cartCount 等数据统一维护。另外别忘了适配 iPhone X 系列的安全区域。