# 微信小程序案例4.4 swiper和switch组件案例4.6 image组件

微信小程序案例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.wxmlscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitle中国精神/viewswiperindicator-dots{{indicatorDots}}autoplay{{autoplay}}circular{{circular}}vertical{{vertical}}interval{{interval}}duration{{duration}}blockwx:for{{background}}wx:keyindexswiper-itemviewclass{{item}} common{{text[index]}}/view/swiper-item/block/swiperviewclasslayoutviewclasswaikuangtextclassmy-left指示点/textswitchchecked{{indicatorDots}}bindchangechangeIndicatorDots//viewviewclasswaikuangtextclassmy-left自动播放/textswitchchecked{{autoplay}}bindchangechangeAutoplay//viewviewclasswaikuangtextclassmy-left衔接滑动/textswitchchecked{{circular}}bindchangechangeCircular//viewviewclasswaikuangtextclassmy-left竖向/textswitchchecked{{vertical}}bindchangechangeVertical//view/view/view/scroll-view2.pages/index/index.jsPage({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.wxsspage{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.wxmlscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitle图片的不同显示模式/viewblockwx:for{{imgArray}}wx:keyindex!--拓展任务增加图片显示模式编号 --view显示模式编号{{index1}}/viewviewclassimg-layoutview{{item.text}}/viewimagesrc{{src}}mode{{item.mode}}/image/view/block/view/scroll-view2. pages/index/index.jsPage({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.wxsspage{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 righttop、bottom等裁剪模式仅webview渲染引擎生效skyline引擎不支持裁剪类mode。wx:for循环中index为数组下标下标从0开始index1可以生成从1开始的顺序编号完成本次拓展任务。本地图片放置在项目根目录images文件夹引用路径格式为/images/图片名.jpg小程序路径区分文件名大小写。常见报错Failed to load image代表图片路径错误、文件不存在或者文件名大小写不匹配。八、实验总结本次案例完成了image组件14种图片显示模式的展示成功实现拓展需求在文字说明上方增加模式编号。通过实验掌握了image组件mode属性、wx:for列表渲染理解了webview渲染引擎对裁剪模式的支持。同时学会排查图片加载失败的问题注意本地图片存放位置与文件名大小写。