微信小程序案例：swiper轮播组件与switch开关组件实战
一、案例简介
本案例基于微信小程序原生组件，使用swiper轮播组件+switch开关组件，实现可动态配置的轮播面板。
基础功能：
- swiper轮播，支持指示点、自动播放、循环衔接滑动、纵向滑动四项特性；
- 使用
switch开关控件，动态切换swiper各项属性的开启/关闭状态； - 在原有3个轮播项基础上，新增第4个滑动页面，一共4个swiper-item，内容为四种中国精神：井冈山精神、长征精神、延安精神、西柏坡精神。
适用场景：小程序首页banner轮播、多页面横向滑动展示，switch适合做功能选项的布尔开关。
二、项目结构
MINIPROGRAM-6 ├─ components │ └─ navigation-bar // 自定义导航栏组件 ├─ pages │ └─ index │ ├ index.js // 页面逻辑、数据、事件函数 │ ├ index.wxml // 页面结构 │ ├ index.wxss // 页面样式 │ └ index.json // 页面配置，引入自定义组件 ├─ app.js ├─ app.json └─ app.wxss三、核心代码实现
1. index.json 页面配置
注册自定义导航组件
{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } }2. 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轮播容器，绑定各项动态属性 --> <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> <!-- switch开关控制区 --> <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>关键点说明：
wx:for循环渲染swiper-item，从js数组读取背景类名和文字；switch组件bindchange绑定切换事件，checked双向绑定布尔变量；- swiper的所有属性全部绑定data中的变量，打开/关闭switch就会修改swiper效果。
3. index.js 页面逻辑
// index.js Page({ data: { // 是否显示swiper组件的面板指示点 indicatorDots: true, // swiper组件是否自动播放 autoplay: false, // swiper组件是否采用衔接滑动 circular: false, // swiper滑动方向是否为纵向 vertical: false, // 自动切换时间间隔，单位为毫秒 interval: 2000, // 滑动动画时长，单位为毫秒 duration: 500, // 增加第4项 bc-purple、西柏坡精神 background: ['bc-red', 'bc-green', 'bc-blue', 'bc-purple'], 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 }) } })核心：
setData修改页面数据，小程序自动驱动视图更新，实现开关控制轮播效果。
4. 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; }四、功能演示说明
- 轮播项：一共4个页面，分别对应4种红色精神，每个页面拥有独立背景色；
- 指示点开关：打开则swiper底部显示小圆点，关闭隐藏；
- 自动播放：开启后轮播自动切换，间隔2000ms；
- 衔接滑动（circular）：开启后，滑到最后一页可以无缝切回第一页；
- 竖向滑动：开启swiper从横向左右滑动，变成上下纵向滑动。
五、知识点总结
- swiper：小程序原生轮播容器，必须搭配
swiper-item使用；常用属性：indicator-dots指示点、autoplay自动播放、circular循环、vertical方向、interval切换间隔、duration动画时长。 - switch：单选开关组件，
bindchange监听切换事件，checked绑定布尔值； - 小程序数据驱动：修改data必须使用
this.setData()，修改后页面自动刷新； - 列表渲染
wx:for：循环数组批量生成swiper-item，新增轮播项只需要在js数组追加元素，不用重复写标签。
六、踩坑小结
- 新增swiper-item时，wxml不需要新增标签，只需要在js的background、text数组追加元素，wx:for会自动渲染；
- vertical开启纵向轮播时，swiper高度要注意，否则内容显示异常；
- switch绑定事件不要忘记
bindchange，不要误写为bindtap。
