小程序选项卡点击切换

小程序选项卡的点击切换可以通过以下步骤实现：

1. 在小程序的 wxml 文件中，添加选项卡的布局和事件绑定：

<view class="tab">
  <view class="tab-item {{activeTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">选项卡1</view>
  <view class="tab-item {{activeTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">选项卡2</view>
  <view class="tab-item {{activeTab === 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">选项卡3</view>
</view>

2. 在小程序的 js 文件中，定义 switchTab 函数：

Page({
  data: {
    activeTab: 0  // 默认选中第一个选项卡
  },
  switchTab: function(e) {
    const index = parseInt(e.currentTarget.dataset.index);
    if (this.data.activeTab === index) {
      return;
    }
    this.setData({
      activeTab: index
    });
  }
})

3. 在小程序的 css 文件中，定义选项卡的样式：

.tab {
  display: flex;
  justify-content: center;
}

.tab-item {
  padding: 10px;
  font-size: 16px;
  color: #999;
}

.tab-item.active {
  color: #333;
  border-bottom: 2px solid #333;
}

这样，当用户点击选项卡时，就会触发 switchTab 函数，更新 activeTab 的值，从而改变选项卡的样式和内容。