这次做的是微信小程序的 image 组件需求是同一张图片用 14 种不同的显示模式全部展示一遍方便对比效果。image 组件最关键的就是 mode 属性同样一张图换个 mode拉伸、裁剪、留白效果完全不一样。我自己用代码生成了一张带四个角色块和中心圆的测试图这样裁剪的时候一眼就能看出来裁掉了哪部分。作业要求在每种模式的说明文字上方加个编号直接用 wx:for 的 index 变量算出来就行。页面 index.wxml 用 wx:for 循环渲染 14 个卡片每张卡片里放一张图mode 动态绑定成数组里的当前项view classitem wx:for{{imgArray}} wx:keymode view classnum第 {{index 1}} 种/view image classpic src{{src}} mode{{item.mode}}/image view classdesc{{item.mode}}{{item.text}}/view /viewindex.js 里把 14 种模式写成一个数组每项是 mode 名和中文说明Page({ data: { src: /images/test.png, imgArray: [ { mode: scaleToFill, text: 不保持纵横比缩放填满元素 }, { mode: aspectFit, text: 保持纵横比完整显示图片 }, { mode: aspectFill, text: 保持纵横比填满并裁剪 }, { mode: widthFix, text: 宽度不变高度自动变化 }, { mode: heightFix, text: 高度不变宽度自动变化 }, { mode: top, text: 只显示图片顶部 }, { mode: bottom, text: 只显示图片底部 }, { mode: center, text: 只显示图片中间 }, { mode: left, text: 只显示图片左侧 }, { mode: right, text: 只显示图片右侧 }, { mode: top left, text: 只显示左上部分 }, { mode: top right, text: 只显示右上部分 }, { mode: bottom left, text: 只显示左下部分 }, { mode: bottom right, text: 只显示右下部分 } ] } })样式里给 image 固定一个 300rpx 高的框这样不同 mode 对比起来才明显.pic { width: 100%; height: 300rpx; background: #f0f0f0; border: 1rpx dashed #ccc; }跑起来之后往下滚动就能看到 14 张一模一样的测试图但每张的裁切比例都不同scaleToFill 把图强行拉扁填满aspectFit 完整显示两边留白aspectFill 填满但裁掉左右top/bottom/left/right 那组就是按方向裁掉多余部分。做的时候踩了个坑image 组件如果不给宽高默认宽高是 320×240而且不写高度的话很多 mode 看不出效果所以一定要在 wxss 里把显示框大小固定下来另外本地图片要放在项目里新建的 images 文件夹src 写绝对路径 /images/xxx.png写相对路径有时候找不到。总结一下 image 的 mode 分两类scaleToFill、aspectFit、aspectFill、widthFix、heightFix 是整体缩放类top/bottom/center/left/right 这组是裁剪定位类实际开发里做头像一般用 aspectFill做 banner 用 widthFix 比较多。
这次做的是微信小程序的 image 组件需求是同一张图片用 14 种不同的显示模式全部展示一遍方便对比效果。image 组件最关键的就是 mode 属性同样一张图换个 mode拉伸、裁剪、留白效果完全不一样。我自己用代码生成了一张带四个角色块和中心圆的测试图这样裁剪的时候一眼就能看出来裁掉了哪部分。作业要求在每种模式的说明文字上方加个编号直接用 wx:for 的 index 变量算出来就行。页面 index.wxml 用 wx:for 循环渲染 14 个卡片每张卡片里放一张图mode 动态绑定成数组里的当前项view classitem wx:for{{imgArray}} wx:keymode view classnum第 {{index 1}} 种/view image classpic src{{src}} mode{{item.mode}}/image view classdesc{{item.mode}}{{item.text}}/view /viewindex.js 里把 14 种模式写成一个数组每项是 mode 名和中文说明Page({ data: { src: /images/test.png, imgArray: [ { mode: scaleToFill, text: 不保持纵横比缩放填满元素 }, { mode: aspectFit, text: 保持纵横比完整显示图片 }, { mode: aspectFill, text: 保持纵横比填满并裁剪 }, { mode: widthFix, text: 宽度不变高度自动变化 }, { mode: heightFix, text: 高度不变宽度自动变化 }, { mode: top, text: 只显示图片顶部 }, { mode: bottom, text: 只显示图片底部 }, { mode: center, text: 只显示图片中间 }, { mode: left, text: 只显示图片左侧 }, { mode: right, text: 只显示图片右侧 }, { mode: top left, text: 只显示左上部分 }, { mode: top right, text: 只显示右上部分 }, { mode: bottom left, text: 只显示左下部分 }, { mode: bottom right, text: 只显示右下部分 } ] } })样式里给 image 固定一个 300rpx 高的框这样不同 mode 对比起来才明显.pic { width: 100%; height: 300rpx; background: #f0f0f0; border: 1rpx dashed #ccc; }跑起来之后往下滚动就能看到 14 张一模一样的测试图但每张的裁切比例都不同scaleToFill 把图强行拉扁填满aspectFit 完整显示两边留白aspectFill 填满但裁掉左右top/bottom/left/right 那组就是按方向裁掉多余部分。做的时候踩了个坑image 组件如果不给宽高默认宽高是 320×240而且不写高度的话很多 mode 看不出效果所以一定要在 wxss 里把显示框大小固定下来另外本地图片要放在项目里新建的 images 文件夹src 写绝对路径 /images/xxx.png写相对路径有时候找不到。总结一下 image 的 mode 分两类scaleToFill、aspectFit、aspectFill、widthFix、heightFix 是整体缩放类top/bottom/center/left/right 这组是裁剪定位类实际开发里做头像一般用 aspectFill做 banner 用 widthFix 比较多。
