60 | tabBar组件（二）：基于系统提供的自定义方式，实现一个tabBar组件-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 章节 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` 组件的路径。

```json
{
  "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` 中声明组件：

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

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

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

```css
.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 的微信小程序版本）。

```javascript
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）**

```xml
<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` 组件。这将为你的小程序项目提供更加个性化的底部导航栏解决方案，进而提升用户体验。

该分类下的相关小册推荐：

微信小程序全栈开发实战(中)

微信小程序与云开发(下)

微信小程序底层框架实现原理

微信小程序与云开发(上)

微信小程序与云开发(中)

微信小程序全栈开发实战(下)