微信小程序 swiper 与 switch 组件实战

开发环境微信开发者工具新建空白项目不使用云服务、不使用模板。实现效果页面标题swiper 和 switch 组件 轮播内容井冈山精神红色背景长征精神绿色背景延安精神蓝色背景西柏坡精神紫色背景下方 4 个 switch 开关指示点控制 swiper 底部圆点是否展示自动播放开启自动轮播切换衔接滑动开启无缝循环轮播竖向切换为垂直上下滑动一、核心知识点swiper 组件小程序轮播容器只能放置swiper‑item子组件表格属性作用indicator‑dots是否显示面板指示点autoplay是否自动切换circular是否衔接无缝循环滑动vertical是否纵向垂直滑动interval自动切换时间msduration滑动动画时长msswitch 组件开关组件bindchange监听开关状态变化checked绑定布尔值。逻辑点击 switch 触发事件函数setData修改页面 data 中的变量wxml 通过{{变量名}}双向绑定到 swiper 属性实现动态修改组件行为。二、完整全部源码1、pages/index/index.wxml!--index.wxml-- navigation-bar titleswiper和switch组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle中国精神/view swiper indicator-dots{{indicatorDots}} autoplay{{autoplay}} circular{{circular}} vertical{{vertical}} interval{{interval}} duration{{duration}} block wx:for{{background}} wx:keyindex swiper-item view class{{item}} common{{text[index]}}/view /swiper-item /block /swiper view classlayout view classwaikuang text classmy-left指示点/text switch checked{{indicatorDots}} bindchangechangeIndicatorDots / /view view classwaikuang text classmy-left自动播放/text switch checked{{autoplay}} bindchangechangeAutoplay / /view view classwaikuang text classmy-left衔接滑动/text switch checked{{circular}} bindchangechangeCircular / /view view classwaikuang text classmy-left竖向/text switch checked{{vertical}} bindchangechangeVertical / /view /view /view /scroll-view2、pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .bc-red { background-color: red; } .bc-green { background-color: green; } .bc-blue { background-color: blue; } /* 作业新增西柏坡紫色背景 */ .bc-purple { background-color: purple; } .common { width: 100%; line-height: 320rpx; font-size: 60rpx; font-weight: bold; text-align: center; letter-spacing: 1em; color: yellow; } .layout { margin-top: 40rpx; padding: 20rpx; border: 2rpx dashed burlywood; } .waikuang { display: flex; flex-direction: row; border-bottom: 2rpx solid #353535; margin: 20rpx 0; padding: 20rpx 0; } .my-left { flex: 1; }3、pages/index/index.js// index.js Page({ data: { indicatorDots: true, autoplay: false, circular: false, vertical: false, interval: 2000, duration: 500, // 作业改动增加第四个背景样式类 bc‑purple background: [bc-red, bc-green, bc-blue, bc-purple], // 作业改动新增西柏坡精神共4个轮播文本 text: [井冈山精神, 长征精神, 延安精神, 西柏坡精神] }, // 修改指示点显示状态 changeIndicatorDots() { this.setData({ indicatorDots: !this.data.indicatorDots }) }, // 修改自动播放状态 changeAutoplay() { this.setData({ autoplay: !this.data.autoplay }) }, // 修改衔接循环状态 changeCircular() { this.setData({ circular: !this.data.circular }) }, // 修改竖向滑动状态 changeVertical() { this.setData({ vertical: !this.data.vertical }) } })4、app.wxss/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx; color: red; }5、pages/index/index.json{ navigationBarTitleText: swiper和switch组件 }三、作业修改点说明重点原始案例只有 3 个轮播页面作业新增第 4 项西柏坡精神改动一共 3 处index.wxss新增样式类.bc‑purple紫色背景index.js 的background数组追加bc‑purpleindex.js 的text数组追加西柏坡精神wx:for 循环会自动遍历数组生成 4 个 swiper‑item指示点自动变为 4 个圆点不需要修改 wxml。四、项目部署运行步骤打开微信开发者工具新建项目项目名称自定义后端服务选择不使用云服务模板选择不使用模板将上面代码分别复制粘贴覆盖对应文件点击编译模拟器预览点击各个 switch 开关观察 swiper 轮播效果变化。五、踩坑记录swiper 里面只能放swiper‑item标签不要直接放 viewswitch 组件 bindchange 事件不要带括号直接写函数名修改 data 必须用this.setData()直接赋值不会更新页面vertical 开启竖向轮播之后滑动方向变成上下。六、总结这个案例演示小程序组件数据双向绑定通过开关组件动态控制轮播组件属性。switch开关触发事件 → setData 更新 data 数据 → wxml 插值表达式把数据绑定到 swiper 组件属性页面实时刷新。 本作业在原有基础上扩展为 4 个轮播条目加深对 wx:for 列表渲染的理解。