微信小程序 image 组件 14 种显示模式详解与实战

一、前言在微信小程序开发中image组件是最常用的组件之一用于展示图片。与 HTML 中的img标签不同小程序的image组件提供了丰富的显示模式mode属性可以控制图片的缩放和裁剪方式。本文将通过一个完整的案例详细演示image组件的14 种显示模式并通过列表渲染wx:for将所有模式一目了然地展示出来。二、image 组件简介image组件默认宽度为 320px、高度为 240px其核心属性是mode用于指定图片的裁剪和缩放模式。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 渲染引擎下支持因此需要在app.json中将renderer设置为webview。三、项目搭建3.1 新建项目新建一个不使用云服务、不使用模板的小程序项目。3.2 修改 app.json将渲染引擎改为webview以支持裁剪模式{pages:[pages/index/index],window:{navigationBarTextStyle:black,navigationStyle:custom},renderer:webview,style:v2,sitemapLocation:sitemap.json}3.3 准备图片在项目根目录新建images文件夹放入一张用于测试的图片如daxinganling.jpg。四、核心代码实现4.1 页面结构 index.wxml使用自定义导航栏组件navigation-bar通过scroll-view实现可滚动区域利用wx:for遍历图片模式数组!--index.wxml--navigation-bartitleimage组件back{{false}}colorblackbackground#FFF/navigation-barscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitle图片的不同显示模式/viewblockwx:for{{imgArray}}viewclassmode-no显示模式编号{{index 1}}/viewviewclassmode-text{{item.text}}/viewviewclassimg-layoutimagesrc{{src}}mode{{item.mode}}//view/block/view/scroll-view代码说明wx:for{{imgArray}}列表渲染遍历模式数组{{item.text}}绑定图片的说明文字{{src}}绑定图片地址{{item.mode}}绑定图片的显示模式{{index 1}}列表渲染的索引从 0 开始加 1 后作为显示模式的编号4.2 页面逻辑 index.js在data中定义图片路径src和模式数组imgArray数组中每一项包含mode显示模式和text模式说明Page({data:{src:/images/daxinganling.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 支持}]}})4.3 页面样式 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;}.mode-no{font-size:28rpx;color:#333;margin-top:20rpx;font-weight:bold;}.mode-text{font-size:28rpx;color:#333;margin-top:10rpx;line-height:1.5;}4.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;}五、功能扩充添加显示模式编号在基本功能的基础上为了更清晰地标识每一种显示模式在文字说明上方增加了图片显示模式的编号。利用wx:for自带的索引变量index从 0 开始通过{{index 1}}即可显示从 1 开始的编号viewclassmode-no显示模式编号{{index 1}}/viewviewclassmode-text{{item.text}}/view效果如下显示模式编号1 scaleToFill: 缩放模式不保持纵横比缩放图片... [图片] 显示模式编号2 aspectFit: 缩放模式保持纵横比缩放图片... [图片] ...六、14 种显示模式效果对比编号模式类型说明1scaleToFill缩放不保持纵横比拉伸填满2aspectFit缩放保持纵横比长边完整显示3aspectFill缩放保持纵横比短边完整显示4widthFix缩放宽度固定高度自适应5heightFix缩放高度固定宽度自适应6top裁剪显示顶部区域7bottom裁剪显示底部区域8center裁剪显示中间区域9left裁剪显示左边区域10right裁剪显示右边区域11top left裁剪显示左上区域12top right裁剪显示右上区域13bottom left裁剪显示左下区域14bottom right裁剪显示右下区域七、总结通过本案例我们学习了image 组件的 14 种显示模式5 种缩放模式 9 种裁剪模式掌握了每种模式的适用场景。列表渲染 wx:for通过遍历数组高效地渲染重复结构避免冗余代码。数据绑定使用{{}}语法将src、mode、text等数据动态绑定到视图。自定义导航栏通过自定义navigation-bar组件实现个性化导航栏。渲染引擎配置裁剪模式需要webview渲染引擎支持需在app.json中配置。scroll-view 滚动使用scroll-view组件实现页面区域的滚动。image组件的显示模式是小程序开发中的基础知识合理选择显示模式可以让图片在不同尺寸的容器中呈现最佳效果。希望本文能帮助你更好地理解和运用image组件。