添加星妈优选页签

components/ScrollableTabs.vue

+<template>
+  <view class="scrollable-tabs">
+    <scroll-view 
+      class="tabs-scroll" 
+      scroll-x="true" 
+      show-scrollbar="false" 
+      :scroll-into-view="'tab-' + currentIndex"
+      :scroll-with-animation="true"
+    >
+      <view class="tabs-container">
+        <view 
+          v-for="(item, index) in tabs" 
+          :key="index"
+          :id="'tab-' + index"
+          class="tab-item"
+          :class="{ 'tab-active': currentIndex === index }"
+          @tap="handleTabClick(index)"
+        >
+          {{ item }}
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  tabs: {
+    type: Array,
+    default: () => []
+  },
+  currentIndex: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const handleTabClick = (index) => {
+  emit('change', index)
+}
+</script>
+
+<style lang="less" scoped>
+.scrollable-tabs {
+  width: 100%;
+  
+  .tabs-scroll {
+    width: 100%;
+    white-space: nowrap;
+    
+    .tabs-container {
+      display: flex;
+      align-items: center;
+      padding: 0 20rpx;
+      min-width: 100%;
+      
+      .tab-item {
+        color: #333;
+        background-color: #e9edf1;
+        padding: 15rpx 20rpx;
+        font-size: 22rpx;
+        margin-right: 15rpx;
+        border-radius: 30rpx;
+        flex-shrink: 0;
+        white-space: nowrap;
+        transition: all 0.3s ease;
+        
+        &:last-child {
+          margin-right: 0;
+        }
+        
+        &.tab-active {
+          color: white;
+          background-color: #D3A358;
+        }
+      }
+    }
+  }
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 750rpx) {
+  .scrollable-tabs {
+    .tabs-scroll {
+      .tabs-container {
+        .tab-item {
+          padding: 12rpx 16rpx;
+          font-size: 20rpx;
+          margin-right: 12rpx;
+        }
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file

docs/可滚动标签实现指南.md

+# 可滚动标签实现指南
+
+## 问题描述
+当标签项（tabitem）总宽度超出父容器宽度时，需要实现左右滑动功能，让用户能够查看所有标签。
+
+## 解决方案
+
+### 方案一：修改现有代码（已实现）
+
+#### 1. 修改模板结构
+```vue
+<scroll-view class="listbox" scroll-x="true" show-scrollbar="false" :scroll-into-view="'tab-' + channelTabIndex">
+  <view class="tab-container">
+    <view 
+      v-for="(item, index) in productTabList" 
+      :key="index" 
+      :id="'tab-' + index"
+      :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
+      @tap="channelTabHandler(index, $event)"
+    >
+      {{ item }}
+    </view>
+  </view>
+</scroll-view>
+```
+
+#### 2. 修改样式
+```css
+.listbox {
+  margin-top: 15rpx;
+  width: 686rpx;
+  white-space: nowrap;
+  
+  .tab-container {
+    display: flex;
+    align-items: center;
+    padding: 0 20rpx;
+    min-width: 100%;
+    
+    .tabitem {
+      color: @color-black-deep;
+      background-color: #e9edf1;
+      padding: 15rpx 20rpx;
+      font-size: 22rpx;
+      margin-right: 15rpx;
+      border-radius: 30rpx;
+      flex-shrink: 0;        /* 防止压缩 */
+      white-space: nowrap;   /* 防止换行 */
+      
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .tabActive {
+      color: white;
+      background-color: @color-gold-main;
+    }
+  }
+}
+```
+
+### 方案二：使用可复用组件（推荐）
+
+#### 1. 使用 ScrollableTabs 组件
+```vue
+<template>
+  <view class="productcontai">
+    <text class="maintitle">{{ erqiPeizhi.title1 }}</text>
+    <ScrollableTabs 
+      :tabs="productTabList"
+      :currentIndex="channelTabIndex"
+      @change="handleTabChange"
+    />
+  </view>
+</template>
+
+<script setup>
+import ScrollableTabs from '../components/ScrollableTabs.vue'
+
+const handleTabChange = (index) => {
+  channelTabIndex.value = index
+}
+</script>
+```
+
+## 关键属性说明
+
+### 1. scroll-view 属性
+```vue
+<scroll-view 
+  scroll-x="true"           <!-- 启用横向滚动 -->
+  show-scrollbar="false"    <!-- 隐藏滚动条 -->
+  :scroll-into-view="'tab-' + currentIndex"  <!-- 自动滚动到指定元素 -->
+  :scroll-with-animation="true"              <!-- 启用滚动动画 -->
+>
+```
+
+### 2. 样式关键属性
+```css
+/* 容器样式 */
+.listbox {
+  white-space: nowrap;      /* 防止换行 */
+}
+
+.tab-container {
+  display: flex;            /* 弹性布局 */
+  min-width: 100%;          /* 最小宽度 */
+  padding: 0 20rpx;         /* 左右内边距 */
+}
+
+.tabitem {
+  flex-shrink: 0;           /* 防止压缩 */
+  white-space: nowrap;      /* 防止换行 */
+  margin-right: 15rpx;      /* 右边距 */
+}
+```
+
+## 实现效果
+
+### 功能特性
+- ✅ 支持横向滚动
+- ✅ 自动滚动到选中项
+- ✅ 隐藏滚动条
+- ✅ 平滑滚动动画
+- ✅ 响应式设计
+- ✅ 防止标签压缩
+
+### 用户体验
+- 当标签总宽度超出容器时，可以左右滑动查看
+- 点击标签时自动滚动到可见区域
+- 滚动过程平滑自然
+- 适配不同屏幕尺寸
+
+## 最佳实践
+
+### 1. 标签间距设置
+```css
+.tabitem {
+  margin-right: 15rpx;  /* 标签间距 */
+  
+  &:last-child {
+    margin-right: 0;    /* 最后一个标签无右边距 */
+  }
+}
+```
+
+### 2. 容器内边距
+```css
+.tab-container {
+  padding: 0 20rpx;     /* 左右留出空间 */
+}
+```
+
+### 3. 防止压缩
+```css
+.tabitem {
+  flex-shrink: 0;       /* 防止标签被压缩 */
+  white-space: nowrap;  /* 防止文字换行 */
+}
+```
+
+### 4. 自动滚动
+```vue
+:scroll-into-view="'tab-' + currentIndex"
+```
+
+## 常见问题解决
+
+### 1. 滚动不生效
+- 检查 `scroll-x="true"` 是否设置
+- 确认容器宽度小于内容宽度
+- 检查 `flex-shrink: 0` 是否设置
+
+### 2. 标签被压缩
+- 添加 `flex-shrink: 0`
+- 设置 `white-space: nowrap`
+
+### 3. 滚动条显示
+- 设置 `show-scrollbar="false"`
+
+### 4. 自动滚动不工作
+- 确认 `scroll-into-view` 的 ID 正确
+- 检查元素 ID 是否唯一
+
+## 响应式设计
+
+### 移动端优化
+```css
+@media screen and (max-width: 750rpx) {
+  .tabitem {
+    padding: 12rpx 16rpx;  /* 减小内边距 */
+    font-size: 20rpx;      /* 减小字体 */
+    margin-right: 12rpx;   /* 减小间距 */
+  }
+}
+```
+
+### 平板端优化
+```css
+@media screen and (min-width: 751rpx) and (max-width: 1024rpx) {
+  .tab-container {
+    padding: 0 30rpx;      /* 增加内边距 */
+  }
+}
+```
+
+## 性能优化
+
+### 1. 使用 transform 动画
+```css
+.tabitem {
+  transition: all 0.3s ease;
+}
+```
+
+### 2. 避免频繁重绘
+```css
+.tab-container {
+  will-change: transform;  /* 优化滚动性能 */
+}
+```
+
+### 3. 合理设置滚动阈值
+```vue
+<scroll-view 
+  :scroll-into-view="shouldScroll ? 'tab-' + currentIndex : ''"
+>
+```
+
+## 总结
+
+通过以上实现，标签列表现在支持：
+
+1. **横向滚动**：当标签总宽度超出容器时自动启用
+2. **自动定位**：点击标签时自动滚动到可见区域
+3. **平滑动画**：滚动过程自然流畅
+4. **响应式设计**：适配不同屏幕尺寸
+5. **性能优化**：避免不必要的重绘和计算
+
+这种实现方式既保持了原有功能，又提供了更好的用户体验，特别适合标签数量较多或标签文字较长的场景。 
\ No newline at end of file