微信小程序自定义 tabBar 开发实战

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

<view>
  <block wx:for="{{list}}" wx:key="index">
    <view class="{{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}` });
  }
});

七、样式优化建议

1. 图标尺寸统一

• 推荐使用 SVG 或 PNG 图标，统一尺寸为 48rpx x 48rpx
• 高亮图标建议使用不同颜色区分

2. 文字颜色变化

• 默认颜色 #666
• 高亮颜色 #ff6600（橙色）或根据品牌色调整

3. 添加阴影效果（可选）

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

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

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

<view>
  <block wx:for="{{list}}" wx:key="index">
    <view class="{{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