一、案例简介本案例是微信小程序轮播图与开关组件的实战练习综合运用了swiper/swiper-item轮播和switch开关两套组件。页面上方是一个轮播图下方排列四个开关显示指示点→ 控制是否显示轮播图底部小圆点自动播放→ 控制是否自动切换衔接滑动→ 控制轮播是否循环衔接播放竖向滑动→ 控制滑动方向是横向还是纵向。拨动不同开关轮播图的播放效果随之实时改变。本次作业在基础案例3 个滑动项之上在 swiper 中再增加一个滑动项共 4 个滑动项。二、学习知识点表格知识点作用说明swiper轮播容器内部只能放swiper-itemswiper-item每个轮播页面仅可放在swiper内indicator-dots是否显示面板指示点小圆点autoplay是否自动切换circular是否采用衔接滑动循环播放vertical滑动方向是否为纵向interval自动切换时间间隔毫秒duration滑动动画时长毫秒switch开关组件checked绑定状态bindchange监听切换wx:for循环渲染多个swiper-item关键swiper 的属性都可以用{{}}绑定数据开关切换时setData改数据轮播效果立即变化。三、开发步骤新建不使用云服务、不使用模板的小程序项目。在index.wxml放置swiper其indicator-dots / autoplay / circular / vertical全部用数据绑定。在swiper内用wx:for循环渲染 4 个swiper-item。下方放置 4 个switch分别绑定changeDots / changeAutoplay / changeCircular / changeVertical。在index.js初始化四个开关状态和滑动项数组共 4 项。每个 switch 的 change 事件里setData修改对应状态。编写样式编译预览测试。四、核心代码1. 页面结构index.wxmlswiper classswiper indicator-dots{{indicatorDots}} autoplay{{autoplay}} circular{{circular}} vertical{{vertical}} interval2000 duration500 !-- 共 4 个滑动项 -- swiper-item wx:for{{slides}} wx:keyindex view classslide stylebackground-color:{{item.color}} text classslide-text{{item.title}}/text /view /swiper-item /swiper view classswitch-area view classswitch-row text显示指示点/text switch checked{{indicatorDots}} bindchangechangeDots / /view view classswitch-row text自动播放/text switch checked{{autoplay}} bindchangechangeAutoplay / /view view classswitch-row text衔接滑动/text switch checked{{circular}} bindchangechangeCircular / /view view classswitch-row text竖向滑动/text switch checked{{vertical}} bindchangechangeVertical / /view /view2. 逻辑index.jsPage({ data: { indicatorDots: true, autoplay: false, circular: false, vertical: false, // 4 个滑动项基础 3 个 作业新增第 4 个 slides: [ { title: 井冈山精神, color: #e53935 }, { title: 长征精神, color: #fb8c00 }, { title: 延安精神, color: #43a047 }, { title: 西柏坡精神, color: #1e88e5 } ] }, changeDots(e) { this.setData({ indicatorDots: e.detail.value }) }, changeAutoplay(e) { this.setData({ autoplay: e.detail.value }) }, changeCircular(e) { this.setData({ circular: e.detail.value }) }, changeVertical(e) { this.setData({ vertical: e.detail.value }) } })3. 样式index.wxss.swiper { width: 100%; height: 400rpx; } .slide { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .slide-text { color: #fff; font-size: 44rpx; font-weight: bold; }五、遇到的问题与解决方案问题 1swiper 里直接放 view不显示。原因swiper 内部只允许放swiper-item。 解决每个轮播页都包一层swiper-item内容再写在里面。问题 2switch 切换了swiper 没变化。原因swiper 属性写死了没有和数据绑定。 解决把indicator-dots等属性写成{{变量}}在 switch 的 change 里setData。问题 3轮播到底后不循环。原因没开circular衔接滑动。 解决打开「衔接滑动」开关即可循环播放。六、运行效果初始显示第一张井冈山精神底部有指示点需手动滑动打开「自动播放」轮播图每 2 秒自动切换打开「衔接滑动」播完最后一张不退回直接衔接下一轮打开「竖向滑动」轮播方向变为上下滚动共 4 个滑动项井冈山 / 长征 / 延安 / 西柏坡精神。七、案例总结通过本案例掌握了swiper轮播图的常用属性指示点、自动播放、衔接滑动、竖向学会用switch开关配合bindchange实时修改数据并通过数据绑定驱动 swiper 刷新。新增的第 4 个滑动项加深了对wx:for循环渲染swiper-item的理解。