微信小程序之Image那些事

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

小程序中 Image使用频率是非常高的 不同场景下 Image使用的属性也不一样

一、使用场景

因为小程序的image是有默认大小的 所以在使用时不得不手动去设置大小 单一图片都好处理 如果是动态渲染的 该怎么处理呢 大部分处理处理方式就是宽度百分百 高度自适应 或者高度百分百 宽度自适应 那么我们该如何精准处理呢

二、使用方式

1.动态读取image大小

文档地址

通过load方法得到原始图片的宽高。

2.动态设置style

这里是vue3的语法 供参考

<view class="paperList">
 <view
   class="paperItem"
   v-for="(item, i) in vdata.imageList"
   :key="item"
   @tap="lookDetail(i)"
 >
   <image
     mode="widthFix"
     :src="item"
     :style="{ width: vdata.imgSize[i + '_' + 'index'] || 0 }"
     @load="(e) => getImgSize(e, i + '_' + 'index')"
   ></image>
 </view>
</view>

import { reactive } from 'vue'
const vdata: any = reactive({
  imageList: [],
  imgSize: {},
})

3.动态赋值

const getImgSize = (e, index, type?: Number) => {
  let maxWidth = type || vdata.mainWidth
  const { width } = e.detail

  if (width > maxWidth) {
    vdata.imgSize[index] = `${maxWidth}px`
  } else {
    vdata.imgSize[index] = `${width}px`
  }
}

总结

宽度百分百 高度自适应 如果宽度大于某个值 设置最大值 如果小于 则取图片宽度 通过bindload读取宽度 然后动态设置。