CRMEB_Uniapp/docs/BANNER_SWIPER_UPDATE.md

轮播图配置更新说明

修改内容

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 - 首页轮播图组件

技术实现

<!-- 轮播图配置 -->
<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"
>

// 数据处理 - 限制最多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. 检查循环轮播是否正常工作