一、swiper 组件让内容轮播起来swiper 是微信原生的轮播组件必须和 swiper-item 一起使用。每个 swiper-item 就是一张要展示的卡片。你的项目里用它来轮播四个中国精神主题每张卡片不同背景色中间显示文字。swiper indicator-dots{{indicatorDots}} autoplay{{autoplay}} circular{{circular}} vertical{{vertical}} block wx:for{{background}} wx:keyindex swiper-item view class{{item}} common{{text[index]}}/view /swiper-item /block /swiper这里用了wx:for 循环渲染background 数组存颜色类名text 数组存显示文字两个数组通过同一个 index 关联起来这样数据驱动视图增删一张卡片只需要改数组就行。swiper 有几个常用属性值得了解。indicator-dots 控制是否显示底部指示点就是那排小圆点。autoplay 控制是否自动切换。circular 打开后播放到最后一张会无缝回到第一张像一个环。vertical 决定轮播方向是横向还是纵向。interval 和duration 分别是自动切换的间隔时间和动画过渡时间单位都是毫秒。二、switch 组件简洁的开关控件switch 是一个只有两种状态的控件开或关比 checkbox 更适合做独立的功能开关。它的用法很简单给一个checked 属性绑定布尔值再给一个bindchange 事件处理切换动作就行。switch checked{{indicatorDots}} bindchangechangeIndicatorDots /项目里有四个这样的 switch每个都有对应的 change 函数。函数内部做的事情也很直接把当前值取反再 setData 回去changeIndicatorDots() { this.setData({ indicatorDots: !this.data.indicatorDots }) }因为 swiper 的属性本身就是 data 里的变量所以一旦 setData 更新了布尔值swiper 组件会自动响应变化用户刚拨动开关轮播的行为立刻就变了。这种数据驱动的双向联动是小程序开发里很常用的模式。三、两者如何配合以及实际建议配合的关键就在于switch 的 checked 绑定的变量正好就是 swiper 属性的值。中间没有任何转换层一条数据流直接贯通。用户拨动 switchbindchange 触发setData 更新变量变量传给 swiper 属性swiper 重新渲染。整条链路清晰没有副作用。如果以后需要加更多控制项比如改变 interval 间隔时间只需要再加一个输入控件把值绑到 interval 上就行。如果 switch 数量多了每个都写一个 change 函数会有点重复。可以考虑写一个通用的处理函数通过传参知道更新哪个字段onSwitchChange(e) { const field e.currentTarget.dataset.field this.setData({ [field]: !this.data[field] }) }然后在 switch 上用data-fieldindicatorDots 传递字段名所有 switch 共用这一个函数就够了。