微信小程序自定义 tabBar 实现指南

3. tab-bar.wxml（组件结构）

<view class="tab-bar">
  <block wx:for="{{list}}" wx:key="index">
    <view class="tab-bar-item {{currentIndex == index ? 'active' : ''}}" bindtap="switchTab" data-index="{{index}}" data-path="{{item.pagePath}}">
      <image src="{{currentIndex == index ? item.selectedIconPath : item.iconPath}}" mode="aspectFit"/>
      <text>{{item.text}}</text>
    </view>
  </block>
</view>

4. tab-bar.wxss（组件样式）

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 98rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
}

.text {
  font-size: 24rpx;
  color: #666;
}

.tab-bar-item.active .text {
  color: #ff6600;
}

5. tab-bar.js（组件逻辑）

Component({
  properties: {
    list: {
      type: Array,
      value: []
    },
    currentIndex: {
      type: Number,
      value: 0
    }
  },
  methods: {
    switchTab(e) {
      const index = e.currentTarget.dataset.index;
      const path = e.currentTarget.dataset.path;
      this.triggerEvent('tabchange', { index, path });
    }
  }
});

六、在页面中使用自定义 tabBar

1. 引入组件

在 pages/index/index.json 中引入组件：

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

2. index.wxml 中使用组件

<view>
  <!-- 页面主体内容 -->
  <swiper current="{{currentTab}}" duration="300">
    <swiper-item wx:for="{{tabPages}}" wx:key="index">
      <block wx:if="{{currentTab == index}}">
        <view wx:if="{{index == 0}}">首页内容</view>
        <view wx:if="{{index == 1}}">分类内容</view>
        <view wx:if="{{index == 2}}">购物车内容</view>
        <view wx:if="{{index == 3}}">我的内容</view>
      </block>
    </swiper-item>
  </swiper>
  <!-- 自定义 tabBar -->
  <custom-tab-bar list="{{tabList}}" currentIndex="{{currentTab}}" bind:tabchange="onTabChange" />
</view>

3. index.js 页面逻辑

Page({
  data: {
    currentTab: 0,
    tabList: [
      {
        text: '首页',
        iconPath: '/images/icon-home.png',
        selectedIconPath: '/images/icon-home-active.png',
        pagePath: 'index'
      },
      {
        text: '分类',
        iconPath: '/images/icon-category.png',
        selectedIconPath: '/images/icon-category-active.png',
        pagePath: 'category'
      },
      {
        text: '购物车',
        iconPath: '/images/icon-cart.png',
        selectedIconPath: '/images/icon-cart-active.png',
        pagePath: 'cart'
      },
      {
        text: '我的',
        iconPath: '/images/icon-user.png',
        selectedIconPath: '/images/icon-user-active.png',
        pagePath: 'user'
      }
    ],
    tabPages: ['index', 'category', 'cart', 'user']
  },
  onTabChange(e) {
    const { index, path } = e.detail;
    this.setData({
      currentTab: index
    });
    // 可选：跳转到对应页面
    // wx.navigateTo({ url: `/pages/${path}/${path}` });
  }
});

七、样式优化建议

• 图标尺寸统一：推荐使用 SVG 或 PNG 图标，统一尺寸为 48rpx x 48rpx，高亮图标建议使用不同颜色区分。
• 文字颜色变化：默认颜色 #666，高亮颜色 #ff6600（橙色）或根据品牌色调整。
• 添加阴影效果（可选）：

.tab-bar {
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

八、实战扩展：中间凸起按钮（如'发布'按钮）

如果希望实现类似小红书或抖音的中间凸起按钮，可以修改 tab-bar.wxml 如下：

<view class="tab-bar">
  <block wx:for="{{list}}" wx:key="index">
    <view class="tab-bar-item {{currentIndex == index ? 'active' : ''}}" bindtap="switchTab" data-index="{{index}}" data-path="{{item.pagePath}}">
      <image src="{{currentIndex == index ? item.selectedIconPath : item.iconPath}}" mode="aspectFit"/>
      <text>{{item.text}}</text>
    </view>
  </block>
  <!-- 中间按钮 -->
  <view class="center-button" bindtap="onCenterClick">
    <image src="/images/icon-publish.png" mode="aspectFit"/>
    <text>发布</text>
  </view>
</view>

并在 tab-bar.wxss 中添加样式：

.center-button {
  position: absolute;
  top: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
  height: 100rpx;
  background-color: #ff6600;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10;
}

九、常见问题与解决方案

十、总结对比表：原生 vs 自定义 tabBar

十一、总结

通过封装组件和灵活配置，开发者可以突破原生 tabBar 的限制，实现高度定制的底部导航体验。