轮播图配置更新说明
修改内容
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 => ({
// ... 轮播图数据映射
}))
注意事项
- 轮播图数据需要包含
status
和 sort
字段
- 滑动方向是微信小程序原生行为,无需额外配置
- 循环轮播确保用户体验的连续性
- 1秒的停留时间适合快速浏览,可根据需要调整
测试建议
- 验证轮播图数量是否限制在6张以内
- 测试左右滑动是否按预期切换
- 确认自动播放间隔是否为1秒
- 检查循环轮播是否正常工作