小程序自定义Component如何使用，手把手封装一个底部Tabbar栏

小程序自定义Component是一种可复用的UI组件，可以在多个页面中使用。底部Tabbar栏是一个常见的UI组件，下面介绍如何手把手封装一个底部Tabbar栏。

1. 创建一个Component

在小程序开发工具中，右键点击项目根目录，选择新建->Component，输入组件名称Tabbar，并选择创建在根目录下。

2. 编写Tabbar组件代码

打开Tabbar目录下的tabbar.wxml文件，编写底部Tabbar栏的HTML代码：

<view class="tabbar">
  <view class="tabbar-item {{activeIndex == 0 ? 'active' : ''}}" bindtap="onTabbarItemClick" data-index="0">
    <image src="/images/home.png" class="tabbar-icon" />
    <text class="tabbar-text">首页</text>
  </view>
  <view class="tabbar-item {{activeIndex == 1 ? 'active' : ''}}" bindtap="onTabbarItemClick" data-index="1">
    <image src="/images/cart.png" class="tabbar-icon" />
    <text class="tabbar-text">购物车</text>
  </view>
  <view class="tabbar-item {{activeIndex == 2 ? 'active' : ''}}" bindtap="onTabbarItemClick" data-index="2">
    <image src="/images/user.png" class="tabbar-icon" />
    <text class="tabbar-text">个人中心</text>
  </view>
</view>

其中，tabbar类是整个底部Tabbar栏的容器，tabbar-item类是每个Tabbar项的容器，active类表示当前选中的Tabbar项，tabbar-icon类是每个Tabbar项的图标，tabbar-text类是每个Tabbar项的文本。

打开Tabbar目录下的tabbar.js文件，编写底部Tabbar栏的JavaScript代码：

Component({
  properties: {
    activeIndex: {
      type: Number,
      value: 0
    }
  },
  data: {
    tabbarItems: [
      { icon: '/images/home.png', text: '首页' },
      { icon: '/images/cart.png', text: '购物车' },
      { icon: '/images/user.png', text: '个人中心' }
    ]
  },
  methods: {
    onTabbarItemClick: function (event) {
      var index = event.currentTarget.dataset.index;
      this.setData({
        activeIndex: index
      });
      this.triggerEvent('tabbarItemClick', index);
    }
  }
})

其中，properties是组件的属性列表，activeIndex表示当前选中的Tabbar项，默认为0。data是组件的私有数据，tabbarItems是Tabbar项的数据列表，包括每个项的图标和文本。methods是组件的方法列表，onTabbarItemClick是Tabbar项的点击事件处理函数，用于更新activeIndex属性，并触发自定义事件tabbarItemClick。

3. 在页面中使用Tabbar组件

在需要使用底部Tabbar栏的页面的wxml文件中，引入Tabbar组件，并在需要显示Tabbar的位置添加Tabbar组件标签：

<view class="page">
  <view class="content">
    <!-- 页面内容 -->
  </view>
  <tabbar active-index="{{activeIndex}}" bind:tabbarItemClick="onTabbarItemClick" />
</view>

其中，page类是整个页面的容器，content类是页面内容的容器，activeIndex属性绑定当前选中的Tabbar项，tabbarItemClick事件绑定Tabbar项的点击事件处理函数。

4. 完整代码示例

Tabbar组件代码：

tabbar.wxml：

<view class="tabbar">
  <view class="tabbar-item {{activeIndex == 0 ? 'active' : ''}}" bindtap="onTabbarItemClick" data-index="0">
    <image src="/images/home.png" class="tabbar-icon" />
    <text class="tabbar-text">首页</text>
  </view>
  <view class="tabbar-item {{activeIndex == 1 ? 'active' : ''}}" bindtap="onTabbarItemClick" data-index="1">
    <image src="/images/cart.png" class="tabbar-icon" />
    <text class="tabbar-text">购物车</text>
  </view>
  <view class="tabbar-item {{activeIndex == 2 ? 'active' : ''}}" bindtap="onTabbarItemClick" data-index="2">
    <image src="/images/user.png" class="tabbar-icon" />
    <text class="tabbar-text">个人中心</text>
  </view>
</view>

tabbar.js：

Component({
  properties: {
    activeIndex: {
      type: Number,
      value: 0
    }
  },
  data: {
    tabbarItems: [
      { icon: '/images/home.png', text: '首页' },
      { icon: '/images/cart.png', text: '购物车' },
      { icon: '/images/user.png', text: '个人中心' }
    ]
  },
  methods: {
    onTabbarItemClick: function (event) {
      var index = event.currentTarget.dataset.index;
      this.setData({
        activeIndex: index
      });
      this.triggerEvent('tabbarItemClick', index);
    }
  }
})

页面代码：

index.wxml：

<view class="page">
  <view class="content">
    <!-- 页面内容 -->
  </view>
  <tabbar active-index="{{activeIndex}}" bind:tabbarItemClick="onTabbarItemClick" />
</view>

index.js：

Page({
  data: {
    activeIndex: 0
  },
  onTabbarItemClick: function (event) {
    var index = event.detail;
    this.setData({
      activeIndex: index
    });
  }
})

index.wxss：

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

.tabbar {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  height: 50rpx;
  padding: 10rpx;
  box-shadow: 0 -2rpx 2rpx rgba(0, 0, 0, 0.1);
}

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

.tabbar-item.active {
  color: #007aff;
}

.tabbar-icon {
  width: 24rpx;
  height: 24rpx;
  margin-bottom: 2rpx;
}

.tabbar-text {
  font-size: 24rpx;
  line-height: 24rpx;
}

在小程序开发工具中，运行项目，即可看到底部Tabbar栏的效果。