彻底告别烦闷，小程序tabbar轻松DIY！

现在的小程序开发中，自定义字体图标组件和tabbar组件已经成为标配。通过这两种组件的强强联手，我们可以轻松打造出各种风格、各种效果的tabbar，满足不同小程序的个性化需求。

1. 自定义字体图标组件

首先，我们需要定义一个自定义字体图标组件。步骤如下：

1. 在阿里图标库（https://iconfont.cn/）中挑选好你所需要的字体图标，选择下载代码。
2. 将下载的代码解压到小程序项目的目录下。
3. 在小程序项目目录下新建一个文件夹，并将解压后的代码拷贝到该文件夹中。
4. 打开小程序开发工具，在项目目录中找到新建的文件夹，右键点击，选择“添加至项目”。

2. tabbar组件

接下来，我们需要创建一个tabbar组件。步骤如下：

1. 在小程序项目目录下新建一个文件夹，并命名为“tabbar”。
2. 在“tabbar”文件夹中新建四个文件，分别命名为“tabbar.json”、“tabbar.wxml”、“tabbar.wxss”和“tabbar.js”。
3. 在“tabbar.json”文件中，写入如下代码：

{
  "component": true,
  "usingComponents": {
    "icon": "../icon/icon"
  }
}

4. 在“tabbar.wxml”文件中，写入如下代码：

<view class="tabbar">
  <view class="tabbar-item" bindtap="onTabItemTap" data-index="{{index}}" wx:for="{{items}}" wx:key="index">
    <icon class="tabbar-item-icon" type="{{item.icon}}" size="24" color="{{activeIndex === index ? '#333' : '#666'}}"></icon>
    <view class="tabbar-item-text">{{item.text}}</view>
  </view>
</view>

5. 在“tabbar.wxss”文件中，写入如下代码：

.tabbar {
  display: flex;
  flex-direction: row;
  height: 50px;
  background-color: #f8f8f8;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 50px;
}

.tabbar-item-icon {
  margin-bottom: 4px;
}

.tabbar-item-text {
  font-size: 12px;
  color: #666;
}

.tabbar-item-active {
  color: #333;
}

6. 在“tabbar.js”文件中，写入如下代码：

Component({
  properties: {
    items: {
      type: Array,
      value: []
    },
    activeIndex: {
      type: Number,
      value: 0
    }
  },

  methods: {
    onTabItemTap(e) {
      const index = e.currentTarget.dataset.index;
      this.triggerEvent('change', { index });
    }
  }
});

3. 在页面上添加组件的标签

最后，我们在页面的WXML文件中添加组件的标签即可。代码如下：

<tabbar items="{{tabbarItems}}" activeIndex="{{activeIndex}}" bind:change="onTabbarChange"></tabbar>

这样，我们就完成了自定义字体图标组件和tabbar组件的开发。让我们来总结一下：

• 自定义字体图标组件的开发步骤：在阿里图标库中挑选好字体图标，下载代码，解压到小程序项目目录下，在项目目录中新建文件夹，将解压后的代码拷贝到该文件夹中，在小程序开发工具中将文件夹添加到项目中。
• tabbar组件的开发步骤：在小程序项目目录下新建文件夹，命名为“tabbar”，在“tabbar”文件夹中新建四个文件，分别命名为“tabbar.json”、“tabbar.wxml”、“tabbar.wxss”和“tabbar.js”，在“tabbar.json”文件中写入组件的配置信息，在“tabbar.wxml”文件中写入组件的模板代码，在“tabbar.wxss”文件中写入组件的样式代码，在“tabbar.js”文件中写入组件的逻辑代码。
• 在页面上添加组件的标签：在页面的WXML文件中添加组件的标签，并设置组件的属性和事件。

希望这篇教程对你有帮助！