2021-06-10 uniapp小程序实现image mode="heightFix"功能

image.png

问题描述

公司项目需要做多端小程序，由于抖音小程序的图片组件mode属性不支持heightFix，于是只能自己做兼容。

原理解析：

是利用image组件@load加载完成事件获取图片原来的宽高计算出图片宽高比，由此动态计算图片宽度

实现代码

具体自行看注释

html 部分

js 部分

data () {
    return {
      imgWidth: 0,   // 图片宽度（单位：px）
      imgHeight: 58, // 图片高度 （单位：rpx）
    }
},
methods: {
  imageLoad(e) {
      //获取图片真实宽度
      let imgwidth = e.detail.width,
        imgheight = e.detail.height,
        ratio = imgwidth / imgheight // 宽高比
        // 计算公式：图片宽度 = 图片宽高比 * 图片高度，并保留3位小数，
        // 因获取的图片真实宽度为px，而高度我用的rpx单位，所以图片高度使用时要换算成px
        this.imgWidth = Number((ratio * this.imgHeight / 750 * uni.getSystemInfoSync().windowWidth).toFixed(3))
   },
}