小程序中图片高度等比缩放

前言：小程序中的image组件，有默认的宽度(320px)和高度(240px)，如果想让图片按比例显示，那就需要自己设置宽度 & 高度。今天来说一下图片等比缩放的实现。

bindload中处理

✦✦01✦✦

WXML代码：

代码语言：javascript复制

<view class='main-content' wx:for="{{detail.content}}">
  <image src="{{item.img}}" class="img" bindload='imgLoad' style='height: {{item.height}}rpx;' data-index="{{index}}"/>
  <text class='content' selectable='true'>{{item.desc}}</text>
</view>

在bindload中去计算图片的高度。

JS代码：

代码语言：javascript复制

imgLoad: function (e) {
  var index = e.currentTarget.dataset.index;
  var detail = this.data.detail;
  var height = Math.ceil(e.detail.height * 750 / e.detail.width);
  detail.content[index].height = height;
  this.setData({
    detail: detail
  })
}

等比缩放图片已经搞定~

mode设置为widthFix

✦✦02✦✦

仔细查看官方文档：mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

widthFix模式：宽度不变，高度自动变化，保持原图宽高比不变

看一下效果：

代码语言：javascript复制

<image src='1.jpg' mode='widthFix'></image>
<image src='1.jpg'></image>

和第一种的实现效果是一样的，用这种方式就不用JS计算了，省去了不少代码，很实用。

然后特意去查了一下，widthFix这个值是在 0.11.122100 版本中更新的，确实要多看文档了~

小程序 微信小程序音视频

0 人点赞