一、案例简介本次学习微信小程序轮播swiper组件与开关switch组件制作 “中国精神” 演示小程序。使用 switch 开关动态控制 swiper 轮播的各项功能切换开关轮播效果会实时改变。课后拓展作业增加第 4 个轮播页面展示西柏坡精神。二、页面实现效果页面分为上下两部分上方为标题和轮播区域展示不同红色精神主题每个轮播页面拥有不一样的背景颜色下方放置四个开关控件。指示点开关初始开启控制轮播底部小圆点是否显示。自动播放开关打开后轮播会自动切换页面关闭后只能手动滑动。衔接滑动开关开启后轮播到最后一页不会跳回第一页顺着方向无缝循环播放。竖向开关开启后轮播由水平左右滑动改成垂直上下滑动。完成作业之后轮播一共 4 个页面底部指示点数量也同步变成 4 个。三、核心知识点swiper 轮播组件swiper 是滑块容器内部只允许放置 swiper‑item 标签每一个 swiper‑item 代表一页轮播内容。 常用属性指示点控制是否展示底部小圆点自动播放开启自动切换轮播衔接滑动实现首尾无缝循环竖向修改滑动方向为垂直切换间隔、动画时长控制轮播的速度和动画效果switch 开关组件开关组件拥有打开、关闭两种状态。通过bindchange捕获开关点击事件checked 属性绑定 JS 中的布尔数据。点击开关触发事件修改 JS 内的变量变量又绑定到 swiper 组件属性上从而改变轮播表现。列表循环渲染 借助 wx:for 循环遍历 JS 中的数组自动生成轮播页面。数组增加数据页面就自动多出轮播项不需要手动增加页面标签作业就是利用该特性实现新增第 4 个轮播页面。小程序数据驱动思想 页面标签通过双大括号语法绑定 JS 的数据使用setData修改 JS 中的 data 数据页面视图就会自动更新不用手动操作页面元素。四、开发流程创建新项目不开启云服务不使用模板。搭建页面结构导航栏、标题、swiper 轮播容器利用循环生成轮播条目页面下方布局四个 switch 开关每个开关绑定对应的切换事件。编写页面样式设置盒子、标题样式定义几套轮播背景色开关区域使用弹性布局做到文字居左开关居右。编写业务逻辑在 data 里面初始化轮播全部布尔状态、时间参数存放轮播背景样式数组和文字内容数组。编写 4 个开关对应的事件函数每次点击开关就把对应布尔值取反调用 setData 更新页面数据。完成拓展作业直接在 JS 的两个数组追加西柏坡精神对应的样式与文字循环会自动渲染第四个轮播页面。五、开发踩坑总结swiper 容器内部不能直接写文字、普通 view所有内容都要包裹在 swiper‑item 里面否则会出现异常。switch 组件必须绑定 bindchange 事件否则点击开关不会产生任何效果。数组和 wx:for 配合使用新增轮播项只需要修改数组不用改动页面结构。多个属性可以同时开启自动播放、衔接滑动、竖向可以组合使用。六、学习小结swiper 用来做轮播效果swiper‑item 是轮播每一页switch 是布尔开关适合用来开启关闭某项功能小程序依靠数据驱动修改 data 的数据页面自动发生变化wx:for 循环遍历数组渲染页面增加页面条目优先考虑修改数组。