提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
小程序中 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读取宽度 然后动态设置。