微信小程序之Image那些事-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序之Image那些事。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

前言

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

一、使用场景

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

二、使用方式

1.动态读取image大小

文档地址

微信小程序之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`
  }
}