这次做的是微信小程序的 swiper 轮播组件和 switch 开关组件，需求是上面一个轮播图，下面一排开关，拨哪个开关，轮播就开启对应的效果。一共四个开关：显示指示点、自动播放、衔接滑动、竖向滑动，拨开关的时候轮播的属性实时跟着变。教材里轮播是 3 个滑动项，作业要求再加一个变成 4 个，我就顺着原来红色 "井冈山精神" 的风格，又加了蓝色 "长征精神"、绿色 "延安精神" 和橙色 "西柏坡精神" 四个色块。
页面 index.wxml 里 swiper 的四个属性全部用双花括号动态绑定，内容用 wx:for 循环渲染 swiper-item，下面四个 switch 各绑一个 change 事件：
<swiper class="swiper" indicator-dots="{{showDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="2000" duration="500"> <swiper-item wx:for="{{slides}}" wx:key="text"> <view class="slide" style="background-color: {{item.bg}};"> <text>{{item.text}}</text> </view> </swiper-item> </swiper> <view class="switch-row"> <text>自动播放</text> <switch checked="{{autoplay}}" bindchange="onAutoplay"/> </view>index.js 里四个开关事件函数写法都一样，e.detail.value 直接就是 true 或 false，setData 改对应属性就行：
Page({ data: { showDots: true, autoplay: false, circular: false, vertical: false, slides: [ { bg: '#e53935', text: '井冈山精神' }, { bg: '#1e88e5', text: '长征精神' }, { bg: '#43a047', text: '延安精神' }, { bg: '#fb8c00', text: '西柏坡精神' } ] }, onDots(e) { this.setData({ showDots: e.detail.value }) }, onAutoplay(e) { this.setData({ autoplay: e.detail.value }) }, onCircular(e) { this.setData({ circular: e.detail.value }) }, onVertical(e) { this.setData({ vertical: e.detail.value }) } })跑起来之后默认显示红色井冈山精神那一页，底部有指示点；拨 "自动播放" 开关，轮播就每两秒自动切一页；拨 "衔接滑动"，播完最后一页会接着滑回第一页不会回弹；拨 "竖向滑动"，轮播方向立刻变成上下翻。做的时候踩了个坑：swiper 里面只能放 swiper-item，想在 swiper-item 里再排版要在 swiper-item 里面套 view，直接往 swiper 里塞 view 是不显示的；另外 swiper 必须给固定高度，不写高度整个组件会塌成一条线，这个刚开始差点没发现。总结一下 swiper 就是小程序的轮播容器，属性用数据绑定动态控制，switch 就是一个拨杆开关，两者组合起来很容易做出版本设置页那种控制面板。
