这次做的是微信小程序的 swiper 轮播组件和 switch 开关组件需求是上面一个轮播图下面一排开关拨哪个开关轮播就开启对应的效果。一共四个开关显示指示点、自动播放、衔接滑动、竖向滑动拨开关的时候轮播的属性实时跟着变。教材里轮播是 3 个滑动项作业要求再加一个变成 4 个我就顺着原来红色 井冈山精神 的风格又加了蓝色 长征精神、绿色 延安精神 和橙色 西柏坡精神 四个色块。页面 index.wxml 里 swiper 的四个属性全部用双花括号动态绑定内容用 wx:for 循环渲染 swiper-item下面四个 switch 各绑一个 change 事件swiper classswiper indicator-dots{{showDots}} autoplay{{autoplay}} circular{{circular}} vertical{{vertical}} interval2000 duration500 swiper-item wx:for{{slides}} wx:keytext view classslide stylebackground-color: {{item.bg}}; text{{item.text}}/text /view /swiper-item /swiper view classswitch-row text自动播放/text switch checked{{autoplay}} bindchangeonAutoplay/ /viewindex.js 里四个开关事件函数写法都一样e.detail.value 直接就是 true 或 falsesetData 改对应属性就行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 就是一个拨杆开关两者组合起来很容易做出版本设置页那种控制面板。
