章节 60 | tabBar组件（二）：基于系统提供的自定义方式，实现一个tabBar组件

在微信小程序开发中，tabBar 是底部导航栏的组件，它允许用户在不同页面间进行快速切换，是提升用户体验的关键组件之一。微信小程序官方提供了基础的 tabBar 配置方式，但为了满足更复杂的设计需求，如动态改变图标、显示未读消息数等，我们可以利用微信小程序提供的自定义 tabBar 功能来实现更加灵活和个性化的底部导航栏。本章将深入探讨如何基于系统提供的自定义方式，实现一个功能丰富的 tabBar 组件。

60.1 自定义tabBar的基本概念

微信小程序的自定义 tabBar 允许开发者通过编写代码来完全控制 tabBar 的样式和行为，包括但不限于图标的显示、文字的样式、点击事件的处理等。要实现自定义 tabBar，需要在 app.json 中进行配置，并在项目中创建一个对应的自定义组件。

步骤一：在app.json中启用自定义tabBar

首先，你需要在 app.json 的 tabBar 字段中设置 custom 字段为 true，以启用自定义 tabBar。同时，还需要指定自定义 tabBar 组件的路径。

{
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      // 其他tab项...
    ]
  },
  "usingComponents": {}
}

注意，虽然这里配置了 list，但在自定义 tabBar 中，这些配置主要用于页面的跳转逻辑，而实际的显示样式将由自定义组件控制。

步骤二：创建自定义tabBar组件

接下来，在项目中创建一个新的自定义组件，用于实现自定义的 tabBar。假设我们创建的组件名为 custom-tab-bar，则需要在项目根目录下创建 custom-tab-bar 文件夹，并在其中编写相应的文件（如 custom-tab-bar.js、custom-tab-bar.json、custom-tab-bar.wxml、custom-tab-bar.wxss）。

60.2 自定义tabBar的实现

自定义组件结构

在 custom-tab-bar.json 中声明组件：

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

自定义组件样式（custom-tab-bar.wxss）

这里可以根据设计需求编写样式，以下是一个简单的示例：

.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 5px 0;
}
.tab-item.active {
  color: #3cc51f;
}
.tab-icon {
  width: 30px;
  height: 30px;
}

自定义组件逻辑（custom-tab-bar.js）

在自定义 tabBar 组件中，你需要处理页面跳转、当前激活项的显示等逻辑。这通常涉及到微信小程序的全局变量（如 getCurrentPages()）或自定义的全局状态管理（如使用 Redux 或 Vuex 的微信小程序版本）。

Component({
  data: {
    selected: 0, // 默认选中第一个tab
    list: [] // tab列表，实际项目中应从全局获取
  },
  methods: {
    switchTab: function(e) {
      const index = e.currentTarget.dataset.index;
      if (this.data.selected === index) return;
      // 假设list已正确获取，这里仅作示例
      const path = this.data.list[index].pagePath;
      wx.switchTab({ url: path });
      this.setData({
        selected: index
      });
    },
    // 假设的获取tab列表的方法，实际开发中可能通过全局变量或事件监听获取
    getTabBarList: function() {
      // 模拟从全局或其他地方获取tab列表
      const list = [
        { pagePath: 'pages/index/index', text: '首页', iconPath: 'path/to/icon1', selectedIconPath: 'path/to/icon1_active' },
        // ... 其他tab项
      ];
      this.setData({ list });
    }
  },
  // 生命周期函数，用于在页面加载时获取tab列表
  attached: function() {
    this.getTabBarList();
  }
});

自定义组件模板（custom-tab-bar.wxml）

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

60.3 注意事项与高级应用

注意事项

1. 性能优化：自定义 tabBar 组件会在所有页面加载时都被创建，因此需要注意避免在其中进行复杂的计算或过多的DOM操作，以免影响性能。
2. 全局状态管理：如果 tabBar 需要根据全局状态（如用户登录状态）进行动态变化，建议使用全局状态管理库或自定义的全局变量来实现。
3. 图标与文字：可以根据设计需求动态调整图标和文字的样式，包括大小、颜色等。

高级应用

• 动态加载图标：根据当前页面的状态（如未读消息数）动态改变图标的样式或内容。
• 动画效果：为 tabBar 的切换添加平滑的动画效果，提升用户体验。
• 响应式布局：根据不同设备的屏幕尺寸调整 tabBar 的布局和样式，确保在不同设备上都能有良好的显示效果。

通过本章的学习，你应该能够掌握如何在微信小程序中基于系统提供的自定义方式实现一个功能丰富、样式灵活的 tabBar 组件。这将为你的小程序项目提供更加个性化的底部导航栏解决方案，进而提升用户体验。