开发环境：微信开发者工具，新建空白项目，不使用云服务、不使用模板。
实现效果
页面标题：swiper 和 switch 组件 轮播内容：
- 井冈山精神（红色背景）
- 长征精神（绿色背景）
- 延安精神（蓝色背景）
- 西柏坡精神（紫色背景）
下方 4 个 switch 开关：
- 指示点：控制 swiper 底部圆点是否展示
- 自动播放：开启自动轮播切换
- 衔接滑动：开启无缝循环轮播
- 竖向：切换为垂直上下滑动
一、核心知识点
swiper 组件：小程序轮播容器，只能放置
swiper‑item子组件表格
属性 作用 indicator‑dots 是否显示面板指示点 autoplay 是否自动切换 circular 是否衔接无缝循环滑动 vertical 是否纵向垂直滑动 interval 自动切换时间（ms） duration 滑动动画时长（ms） - switch 组件：开关组件，
bindchange监听开关状态变化；checked绑定布尔值。 - 逻辑：点击 switch 触发事件函数，
setData修改页面 data 中的变量，wxml 通过{{变量名}}双向绑定到 swiper 属性，实现动态修改组件行为。
二、完整全部源码
1、pages/index/index.wxml
<!--index.wxml--> <navigation-bar title="swiper和switch组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">中国精神</view> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{background}}" wx:key="index"> <swiper-item> <view class="{{item}} common">{{text[index]}}</view> </swiper-item> </block> </swiper> <view class="layout"> <view class="waikuang"> <text class="my-left">指示点</text> <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" /> </view> <view class="waikuang"> <text class="my-left">自动播放</text> <switch checked="{{autoplay}}" bindchange="changeAutoplay" /> </view> <view class="waikuang"> <text class="my-left">衔接滑动</text> <switch checked="{{circular}}" bindchange="changeCircular" /> </view> <view class="waikuang"> <text class="my-left">竖向</text> <switch checked="{{vertical}}" bindchange="changeVertical" /> </view> </view> </view> </scroll-view>2、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‑purple"； - index.js 的
text数组追加"西柏坡精神"；
wx:for 循环会自动遍历数组生成 4 个 swiper‑item，指示点自动变为 4 个圆点，不需要修改 wxml。
四、项目部署运行步骤
- 打开微信开发者工具，新建项目；
- 项目名称自定义，后端服务选择不使用云服务，模板选择不使用模板；
- 将上面代码分别复制粘贴覆盖对应文件；
- 点击编译，模拟器预览；
- 点击各个 switch 开关，观察 swiper 轮播效果变化。
五、踩坑记录
- swiper 里面只能放
swiper‑item标签，不要直接放 view； - switch 组件 bindchange 事件不要带括号，直接写函数名；
- 修改 data 必须用
this.setData()，直接赋值不会更新页面； - vertical 开启竖向轮播之后，滑动方向变成上下。
六、总结
这个案例演示小程序组件数据双向绑定，通过开关组件动态控制轮播组件属性。switch开关触发事件 → setData 更新 data 数据 → wxml 插值表达式把数据绑定到 swiper 组件属性，页面实时刷新。 本作业在原有基础上扩展为 4 个轮播条目，加深对 wx:for 列表渲染的理解。
