一、案例简介本案例是微信小程序图片组件的实战练习核心学习image组件的mode属性。小程序运行后页面从上到下依次展示同一张图片的 14 种显示模式每种模式配一段文字说明滚动页面即可对比不同模式下图片的裁剪、缩放效果。本次作业在基础案例之上在每个显示模式的文字说明上方增加了该模式的编号第 1 种第 14 种方便对照查看。二、学习知识点表格知识点作用说明image图片组件通过src绑定图片地址mode控制图片裁剪、缩放的模式共 14 种wx:for列表渲染循环生成 14 个图片块缩放模式scaleToFill / aspectFit / aspectFill / widthFix / heightFix裁剪模式top / bottom / center / left / right / top left / top right / bottom left / bottom right14 种 mode 分两类缩放模式改变图片尺寸裁剪模式不缩放、只显示图片的某个区域。三、开发步骤新建不使用云服务、不使用模板的小程序项目。准备一张图片本地 images 文件夹或网络地址在data.src中配置。在index.js的data.imgArray中定义 14 个对象每个对象含id编号、mode模式名、text说明。在index.wxml用wx:for循环渲染image mode{{item.mode}}。在图片下方、文字说明上方用{{shturl.}}显示编号作业新增。编写样式编译预览测试。四、核心代码1. 页面结构index.wxmlview classcontainer view classitem wx:for{{imgArray}} wx:keymode image classpic src{{src}} mode{{item.mode}}/image !-- 作业新增编号显示在文字说明上方 -- view classnum第 {{shturl.}} 种{{item.mode}}/view view classtext{{item.text}}/view /view /view2. 逻辑index.jsPage({ data: { src: https://picsum.photos/375/200, imgArray: [ { id: 1, mode: scaleToFill, text: scaleToFill不保持纵横比缩放使图片完全填满 }, { id: 2, mode: aspectFit, text: aspectFit保持纵横比缩放长边完整显示 }, { id: 3, mode: aspectFill, text: aspectFill保持纵横比缩放短边完整显示 }, { id: 4, mode: widthFix, text: widthFix宽度不变高度自动变化 }, { id: 5, mode: heightFix, text: heightFix高度不变宽度自动变化 }, { id: 6, mode: top, text: top不缩放只显示图片顶部区域 }, { id: 7, mode: bottom, text: bottom不缩放只显示图片底部区域 }, { id: 8, mode: center, text: center不缩放只显示图片中间区域 }, { id: 9, mode: left, text: left不缩放只显示图片左边区域 }, { id: 10, mode: right, text: right不缩放只显示图片右边区域 }, { id: 11, mode: top left, text: top left不缩放只显示左上方区域 }, { id: 12, mode: top right, text: top right不缩放只显示右上方区域 }, { id: 13, mode: bottom left, text: bottom left不缩放只显示左下方区域 }, { id: 14, mode: bottom right,text: bottom right不缩放只显示右下方区域 } ] } })3. 样式index.wxss.item { background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 24rpx; } .pic { width: 100%; height: 200rpx; background: #eee; } .num { font-size: 28rpx; color: #07c160; font-weight: bold; margin-top: 16rpx; } .text { font-size: 28rpx; color: #333; margin-top: 8rpx; }五、遇到的问题与解决方案问题 1图片不显示。原因src路径写错或网络图片未在开发者工具勾选「不校验合法域名」。 解决确认图片地址正确本地图片放在 images 文件夹并写相对路径网络图片在详情本地设置里勾选不校验域名。问题 214 段代码重复写 14 个 image。原因没用列表渲染。 解决把 14 种模式放进数组用wx:for循环渲染只写一个 image 标签。问题 3编号没显示。原因数组里没有id字段。 解决在每个对象里加id: 1~14WXML 中用{{shturl.}}输出。六、运行效果页面滚动展示 14 张卡片每张卡片上方是同一图片在对应 mode 下的效果中间绿色编号「第 N 种mode 名」下方是模式说明文字作业要求的编号已加在文字说明正上方。七、案例总结通过本案例系统掌握了image组件 14 种mode显示模式的差异理解了缩放模式与裁剪模式的区别并熟练运用wx:for把数据数组批量渲染成界面。新增的编号字段让每种模式一目了然也加深了对数据驱动视图的理解。