选项卡组件 (c-tabs)

选项卡组件提供了一种便捷的方式来在页面上展示分类内容，用户可以通过点击不同的选项卡来切换显示的内容。

基本用法

<template>
  <view>
    <!-- 基本用法，使用字符串数组 -->
    <c-tabs :dataList="tabList" :tabIndex="currentTab" @change="onTabChange"></c-tabs>
    
    <!-- 显示内容区域 -->
    <view class="content">
      <view v-if="currentTab == 0">选项卡1的内容</view>
      <view v-if="currentTab == 1">选项卡2的内容</view>
      <view v-if="currentTab == 2">选项卡3的内容</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: ['选项卡1', '选项卡2', '选项卡3'],
      currentTab: 0
    }
  },
  methods: {
    onTabChange(item, index) {
      this.currentTab = index;
      // 执行切换后的操作
    }
  }
}
</script>

使用对象数组

当需要展示的选项卡标题来自对象数组时，可以通过 field 属性指定要显示的字段。

<template>
  <view>
    <!-- 使用对象数组，指定field属性 -->
    <c-tabs :dataList="categoryList" field="name" :tabIndex="currentTab" @change="onTabChange"></c-tabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [
        { id: 1, name: '分类一' },
        { id: 2, name: '分类二' },
        { id: 3, name: '分类三' }
      ],
      currentTab: 0
    }
  },
  methods: {
    onTabChange(item, index) {
      this.currentTab = index;
      console.log('选中的分类:', item);
      // 执行切换后的操作
    }
  }
}
</script>

属性说明

属性名	类型	默认值	说明
tabIndex	Number | String	0	当前选中的选项卡索引
dataList	Array	[]	选项卡数据列表，可以是字符串数组或对象数组
field	String	''	当 dataList 为对象数组时，指定要显示的字段名

事件说明

事件名	说明	回调参数
change	选项卡切换时触发	(item, index)：当前选中的项和索引

样式说明

组件内置了默认样式，选中状态的选项卡会显示主题色和下划线。

默认样式特点：

• 选项卡容器使用 flex 布局，均匀分布（justify-content: space-around）
• 容器有内边距 24rpx 0，背景色为白色
• 底部带有 8rpx 的灰色边框（#F5F5F7）
• 选项卡使用 sticky 定位，会在页面滚动时吸顶
• 选项卡之间有 1rpx 宽，24rpx 高的灰色分隔线（#C8CACC），最后一个选项卡没有分隔线
• 未选中状态：字体为灰色（#666666），字号 28rpx，字体粗细 400
• 选中状态：字体加粗，颜色变为主题色（$c-bgColor），字号 30rpx，底部显示 4rpx 高的主题色下划线

实现原理

组件通过以下步骤实现选项卡功能：

1. 接收 dataList 数据源，可以是字符串数组或对象数组
2. 通过 field 属性决定显示对象数组中的哪个字段
3. 根据 tabIndex 控制当前选中的选项卡样式
4. 点击选项卡时触发 change 事件，将当前项和索引传递给父组件
5. 父组件负责更新 tabIndex 和处理相应的业务逻辑

注意事项

1. 组件只负责选项卡的切换，不会自动控制内容区域的显示与隐藏，需要在父组件中根据 tabIndex 来切换内容
2. 组件使用了 sticky 定位，默认会吸顶显示，便于长页面滚动时保持选项卡可见
3. 主题色（$c-bgColor）在未设置时可能会导致样式不正确，请确保在全局样式中定义了该变量
4. 组件内部使用 async/await 处理了选项卡切换逻辑，为后续可能的异步操作预留了扩展空间