微信小程序之Image那些事

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

---

前言

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

一、使用场景

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

二、使用方式

1.动态读取image大小

文档地址

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

2.动态设置style

这里是vue3的语法 供参考

<view class="paperList"><viewclass="paperItem"v-for="(item, i) in vdata.imageList":key="item"@tap="lookDetail(i)"><imagemode="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.mainWidthconst { width } = e.detailif (width > maxWidth) {vdata.imgSize[index] = `${maxWidth}px`} else {vdata.imgSize[index] = `${width}px`}
}

总结

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