微信小程序案例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 titleswiper和switch组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle中国精神/view !-- swiper轮播容器绑定各项动态属性 -- swiper indicator-dots{{indicatorDots}} autoplay{{autoplay}} circular{{circular}} vertical{{vertical}} interval{{interval}} duration{{duration}} block wx:for{{background}} wx:keyindex swiper-item view class{{item}} common{{text[index]}}/view /swiper-item /block /swiper !-- switch开关控制区 -- view classlayout view classwaikuang text classmy-left指示点/text switch checked{{indicatorDots}} bindchangechangeIndicatorDots / /view view classwaikuang text classmy-left自动播放/text switch checked{{autoplay}} bindchangechangeAutoplay / /view view classwaikuang text classmy-left衔接滑动/text switch checked{{circular}} bindchangechangeCircular / /view view classwaikuang text classmy-left竖向/text switch checked{{vertical}} bindchangechangeVertical / /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。
