前言
本次案例《4.4 swiper 和 switch 组件》，学习小程序轮播swiper轮播组件与开关switch组件。在基础功能上，给 swiper 新增一项，一共 4 个滑动页面，实现轮播切换，使用 switch 控制轮播自动播放。
一、知识点介绍
- swiper：轮播容器，
swiper-item代表每一个滑动项，常用于首页 banner。autoplay：是否自动轮播interval：自动切换间隔时间bindchange：轮播切换触发事件
- switch：开关组件，
bindchange监听开关状态，布尔值 true 打开，false 关闭。 - 作业扩展：swiper 内增加一个滑动项，总共4 个 swiper-item。
二、完整代码
pages/index/index.wxml
<!--轮播swiper，一共4个滑动项--> <swiper autoplay="{{autoplay}}" interval="2000" bindchange="swiperChange" style="height:300rpx;"> <swiper-item> <view class="item">第1个轮播项</view> </swiper-item> <swiper-item> <view class="item">第2个轮播项</view> </swiper-item> <swiper-item> <view class="item">第3个轮播项</view> </swiper-item> <swiper-item> <view class="item">第4个轮播项</view> </swiper-item> </swiper> <view>当前轮播索引：{{currentIndex}}</view> <!--switch开关，控制自动播放--> <view>开启自动轮播： <switch checked="{{autoplay}}" bindchange="switchChange"></switch> </view>pages/index/index.js
Page({ data:{ autoplay:false, currentIndex:0 }, //轮播切换事件 swiperChange(e){ this.setData({ currentIndex:e.detail.current }) }, //switch开关事件 switchChange(e){ this.setData({ autoplay:e.detail.value }) } })pages/index/index.wxss
.item{ height:100%; display:flex; justify-content:center; align-items:center; font-size:36rpx; background:#87CEEB; } view{ margin:20rpx; font-size:32rpx; }三、运行测试效果
- swiper 一共有 4 个滑动页面，可以左右手动滑动切换。
- 打开 switch 开关：autoplay 变为 true，轮播自动滚动，2 秒切换一页。
- 关闭 switch 开关：停止自动轮播。
- 滑动轮播时，页面实时显示当前轮播索引。
四、核心要点总结
<swiper>包裹<swiper-item>，每一个 swiper-item 就是一页轮播。本案例一共 4 项，满足作业要求。autoplay控制自动播放，为布尔变量，可以由 switch 开关动态修改。bindchange在轮播切换完成触发，e.detail.current拿到当前页码。- switch 组件
e.detail.value返回布尔值 true/false，适合用来做功能开关。
五、小结
本案例学习 swiper 轮播组件与 switch 开关组件，完成作业扩展需求，将 swiper 滑动项增加至 4 个。swiper 是小程序首页 banner 常用组件，switch 适合设置项的开关控制，两者结合实现可控制的轮播效果。
