一、实验简介本案例练习微信小程序两个基础组件swiper轮播滑块组件常用于 banner 图滑动可自动轮播、指示点、手动左右滑动。switch开关组件布尔型选择器用来控制 swiper 的自动播放、循环播放等属性。需求实现4 个 swiper 滑动项通过 switch 开关控制轮播是否自动播放、是否循环。二、组件知识点swiperautoplay布尔值true 自动轮播false 停止。circular布尔值true 循环轮播。indicator-dots显示小圆点指示条。interval自动切换间隔单位 ms。swiper-item每一页轮播内容一个 swiper-item 就是 1 个滑动项。switchbindchange开关切换时触发事件获取开关最新状态。checked绑定数据控制开关选中与否。三、完整代码实现1. index.wxmlview classcontainer !-- 轮播区域 -- swiper classswiper autoplay{{autoplay}} circular{{circular}} indicator-dots interval2000 swiper-item view classitem第1个轮播页面/view /swiper-item swiper-item view classitem第2个轮播页面/view /swiper-item swiper-item view classitem第3个轮播页面/view /swiper-item !-- 新增第4个滑动项作业要求 -- swiper-item view classitem第4个轮播页面/view /swiper-item /swiper !-- switch开关 -- view classswitch-box view自动播放switch checked{{autoplay}} bindchangechangeAutoPlay//view view循环播放switch checked{{circular}} bindchangechangeCircular//view /view /view2. index.wxss.container{ padding:20rpx; } .swiper{ height:300rpx; } .item{ height:100%; display:flex; justify-content:center; align-items:center; background:#409eff; color:#fff; font-size:32rpx; } .switch-box{ margin-top:30rpx; font-size:30rpx; }3. index.jsPage({ data:{ autoplay:false, circular:false }, // 自动播放开关事件 changeAutoPlay(e){ this.setData({ autoplay:e.detail.value }) }, // 循环播放开关事件 changeCircular(e){ this.setData({ circular:e.detail.value }) } })4. index.json{ usingComponents: {} }四、运行效果说明页面加载后轮播一共 4 页底部有指示圆点。打开【自动播放】开关轮播每 2 秒自动翻页关闭则停止。打开【循环播放】滑到最后一页可以无缝回到第一页。左右可以手动滑动切换轮播页面。五、踩坑总结swiper 高度必须设置否则页面看不到轮播内容。switch 的bindchange事件里e.detail.value拿到的是布尔值 true/false不能直接赋值字符串。增加 swiper-item 即可新增滑动项作业要求 4 个写 4 组 swiper-item 标签。六、总结swiper 是小程序最常用的轮播组件switch 用来做布尔状态控制。本案例把两个组件结合通过开关动态修改 swiper 的属性理解小程序数据绑定原理。