# 轮播图配置更新说明

## 修改内容

### 1. 轮播图数量限制
- 限制最多显示6张轮播图
- 在数据加载时通过 `.slice(0, 6)` 实现数量限制
- 只显示状态为启用的轮播图 (`status === 1`)
- 按排序字段 (`sort`) 进行排序

### 2. 轮播图停留时间
- 修改 `:interval="1000"` - 每张图片停留1秒（1000毫秒）
- 原来设置为3秒（3000毫秒）

### 3. 滑动方向配置
- 添加 `:circular="true"` - 启用循环轮播
- 向左滑动：划到下一张图（current 增加）
- 向右滑动：返回上一张图（current 减少）

### 4. 切换动画优化
- 修改 `:duration="300"` - 切换动画时长从500ms减少到300ms
- 提供更流畅的切换体验

## 修改的文件

- `pages/index/index.vue` - 首页轮播图组件

## 技术实现

```vue
<!-- 轮播图配置 -->
<swiper 
    class="banner-swiper" 
    :indicator-dots="true" 
    :autoplay="true" 
    :interval="1000"     <!-- 每张停留1秒 -->
    :duration="300"      <!-- 切换动画300ms -->
    :circular="true"     <!-- 启用循环轮播 -->
    indicator-color="rgba(255,255,255,0.5)"
    indicator-active-color="#FFFFFF"
    @change="onBannerChange"
>
```

```javascript
// 数据处理 - 限制最多6张轮播图
this.bannerList = response.data.banners
    .filter(banner => banner.status === 1) // 只显示启用的轮播图
    .sort((a, b) => a.sort - b.sort)      // 按排序字段排序
    .slice(0, 6)                           // 限制最多6张
    .map(banner => ({
        // ... 轮播图数据映射
    }))
```

## 注意事项

1. 轮播图数据需要包含 `status` 和 `sort` 字段
2. 滑动方向是微信小程序原生行为，无需额外配置
3. 循环轮播确保用户体验的连续性
4. 1秒的停留时间适合快速浏览，可根据需要调整

## 测试建议

1. 验证轮播图数量是否限制在6张以内
2. 测试左右滑动是否按预期切换
3. 确认自动播放间隔是否为1秒
4. 检查循环轮播是否正常工作