微信小程序案例4.4 swiper和switch组件
一、实验目的
- 掌握swiper滑块视图容器组件以及swiper‑item子组件的使用。
- 理解swiper常用属性：indicator‑dots、autoplay、circular、vertical。
- 掌握switch开关组件，通过bindchange监听开关状态切换事件。
- 学会使用wx:for循环批量渲染swiper‑item轮播项。
- 拓展任务：增加第4个轮播项，展示西柏坡精神，紫色背景。
二、实验环境
微信开发者工具，新建空白小程序项目，不使用云服务、不使用模板。
三、实验原理
- swiper组件：滑块轮播容器，内部只能放置
swiper‑item子组件。indicator‑dots：是否显示面板小圆点指示点autoplay：是否开启自动轮播circular：是否开启衔接无缝循环滑动vertical：是否开启竖向垂直滑动interval：自动切换时间间隔（毫秒）duration：滑动动画时长（毫秒）
- switch组件：开关组件，
bindchange监听开关状态切换；对布尔值取反!实现开关状态翻转。 - wx:for：列表循环，遍历数组批量生成swiper‑item，数组新增元素即可新增轮播页面。
- 利用Mustache语法将js中布尔变量绑定到swiper属性，通过
setData()修改变量，动态改变轮播组件效果。
四、项目目录结构
swiper和switch组件 ├─pages │ └─index │ ├─index.js │ ├─index.wxml │ └─index.wxss ├─app.js ├─app.json └─app.wxss五、核心代码
1.pages/index/index.wxml
<scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="box"><viewclass="title">中国精神</view><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"circular="{{circular}}"vertical="{{vertical}}"interval="{{interval}}"duration="{{duration}}"><blockwx:for="{{background}}"wx:key="index"><swiper-item><viewclass="{{item}} common">{{text[index]}}</view></swiper-item></block></swiper><viewclass="layout"><viewclass="waikuang"><textclass="my-left">指示点</text><switchchecked="{{indicatorDots}}"bindchange="changeIndicatorDots"/></view><viewclass="waikuang"><textclass="my-left">自动播放</text><switchchecked="{{autoplay}}"bindchange="changeAutoplay"/></view><viewclass="waikuang"><textclass="my-left">衔接滑动</text><switchchecked="{{circular}}"bindchange="changeCircular"/></view><viewclass="waikuang"><textclass="my-left">竖向</text><switchchecked="{{vertical}}"bindchange="changeVertical"/></view></view></view></scroll-view>2.pages/index/index.js
Page({data:{indicatorDots:true,autoplay:false,circular:false,vertical:false,interval:2000,duration:500,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})}})3.pages/index/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:bolder;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.app.wxss
.box{margin:20rpx;padding:20rpx;border:2rpx solid silver;}.title{font-size:40rpx;font-weight:bolder;text-align:center;margin-bottom:30rpx;color:red;}5.app.json
{"pages":["pages/index/index"],"window":{"navigationBarTitleText":"swiper和switch组件","navigationBarTextStyle":"black"},"style":"v2","sitemapLocation":"sitemap.json"}六、运行效果
- 页面标题红色居中显示“中国精神”。
- 轮播共4个页面：井冈山精神（红色）、长征精神（绿色）、延安精神（蓝色）、西柏坡精神（紫色），指示点显示4个小圆点。
- 四个switch开关：
- 指示点：控制底部小圆点显示与隐藏，默认开启；
- 自动播放：开启后轮播自动切换页面；
- 衔接滑动：开启后实现无缝循环轮播；
- 竖向：开启后切换为上下垂直滑动。
七、实验总结
- swiper是轮播容器，内部只能放置swiper‑item子组件。
- switch开关组件依靠bindchange捕获切换事件，使用
!对布尔值取反，setData更新数据，动态控制swiper组件属性。 - wx:for循环遍历数组批量生成轮播项，在数组中添加元素即可新增轮播页面。
- indicator‑dots控制指示点，autoplay控制自动播放，circular实现衔接循环，vertical切换滑动方向。
- 拓展任务完成，新增第四个轮播项西柏坡精神，紫色背景，实现四页轮播效果。
微信小程序案例4.6 image组件
一、实验简介
本案例学习微信小程序image图片组件，掌握mode属性的14种图片显示模式。在基础功能上进行拓展：在每种图片显示模式的文字说明上方增加显示模式编号，使用wx:for循环批量渲染不同显示模式，直观对比缩放、裁剪两类图片展示效果。
二、实验目的
- 掌握
image组件基础用法，熟悉mode属性14种图片显示模式。 - 理解缩放模式与裁剪模式的区别，掌握每种mode的图片渲染规则。
- 掌握
wx:for列表渲染，遍历对象数组批量生成页面内容。 - 利用循环下标
index实现序号输出，完成拓展任务：增加图片模式编号。 - 了解小程序渲染引擎差异，裁剪模式需要webview渲染引擎支持。
三、实验环境
微信开发者工具，新建空白小程序项目，不开启云服务。
四、项目目录结构
image组件案例 ├─images │ └─leimu.jpg ├─pages │ └─index │ ├─index.js │ ├─index.wxml │ └─index.wxss ├─app.js ├─app.json └─app.wxss五、核心代码
1. pages/index/index.wxml
<scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="box"><viewclass="title">图片的不同显示模式</view><blockwx:for="{{imgArray}}"wx:key="index"><!--拓展任务：增加图片显示模式编号 --><view>显示模式编号：{{index+1}}</view><viewclass="img-layout"><view>{{item.text}}</view><imagesrc="{{src}}"mode="{{item.mode}}"></image></view></block></view></scroll-view>2. pages/index/index.js
Page({data:{//根目录images下的图片src:'/images/leimu.jpg',imgArray:[{mode:'scaleToFill',text:'scaleToFill: 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'},{mode:'aspectFit',text:'aspectFit: 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来'},{mode:'aspectFill',text:'aspectFill: 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取'},{mode:'widthFix',text:'widthFix: 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变'},{mode:'heightFix',text:'heightFix: 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变'},{mode:'top',text:'top: 裁剪模式，不缩放图片，只显示图片的顶部区域。仅 Webview 支持'},{mode:'bottom',text:'bottom: 裁剪模式，不缩放图片，只显示图片的底部区域。仅 Webview 支持'},{mode:'center',text:'center: 裁剪模式，不缩放图片，只显示图片的中间区域。仅 Webview 支持'},{mode:'left',text:'left: 裁剪模式，不缩放图片，只显示图片的左边区域。仅 Webview 支持'},{mode:'right',text:'right: 裁剪模式，不缩放图片，只显示图片的右边区域。仅 Webview 支持'},{mode:'top left',text:'top left: 裁剪模式，不缩放图片，只显示图片的左上边区域。仅 Webview 支持'},{mode:'top right',text:'top right: 裁剪模式，不缩放图片，只显示图片的右上边区域。仅 Webview 支持'},{mode:'bottom left',text:'bottom left: 裁剪模式，不缩放图片，只显示图片的左下边区域。仅 Webview 支持'},{mode:'bottom right',text:'bottom right: 裁剪模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持'}]}})3. pages/index/index.wxss
page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.img-layout{text-align:center;margin-top:20rpx;margin-bottom:40rpx;}image{width:480rpx;height:480rpx;background-color:#eee;}4. app.wxss
.box{margin:20rpx;padding:20rpx;border:2rpx solid silver;}.title{font-size:40rpx;font-weight:bolder;text-align:center;margin-bottom:30rpx;color:red;}5. app.json
{"pages":["pages/index/index"],"window":{"navigationBarTitleText":"image组件","navigationBarTextStyle":"black"},"style":"v2","renderer":"webview","sitemapLocation":"sitemap.json"}六、运行效果
- 页面顶部红色标题居中显示：
图片的不同显示模式。 - 通过滚动页面浏览14种图片显示模式。
- 拓展效果：每一组图片模式上方展示
显示模式编号：1、显示模式编号：2 …… 显示模式编号：14。 - 每个条目展示mode文字说明，下方480rpx×480rpx容器加载图片，不同mode分别呈现缩放或裁剪效果。
七、知识点总结
image组件的mode属性共14种，分为缩放模式、裁剪模式两大类。- 缩放模式（5种）：scaleToFill、aspectFit、aspectFill、widthFix、heightFix
- 裁剪模式（9种）：top、bottom、center、left、right、top left、top right、bottom left、bottom right
- top、bottom等裁剪模式仅webview渲染引擎生效，skyline引擎不支持裁剪类mode。
wx:for循环中index为数组下标，下标从0开始，index+1可以生成从1开始的顺序编号，完成本次拓展任务。- 本地图片放置在项目根目录
images文件夹，引用路径格式为/images/图片名.jpg；小程序路径区分文件名大小写。 - 常见报错：
Failed to load image，代表图片路径错误、文件不存在或者文件名大小写不匹配。
八、实验总结
本次案例完成了image组件14种图片显示模式的展示，成功实现拓展需求，在文字说明上方增加模式编号。通过实验掌握了image组件mode属性、wx:for列表渲染，理解了webview渲染引擎对裁剪模式的支持。同时学会排查图片加载失败的问题，注意本地图片存放位置与文件名大小写。
