提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
前言
小程序中 Image使用頻率是非常高的 不同場(chǎng)景下 Image使用的屬性也不一樣
一、使用場(chǎng)景
因?yàn)樾〕绦虻膇mage是有默認(rèn)大小的 所以在使用時(shí)不得不手動(dòng)去設(shè)置大小 單一圖片都好處理 如果是動(dòng)態(tài)渲染的 該怎么處理呢 大部分處理處理方式就是寬度百分百 高度自適應(yīng) 或者高度百分百 寬度自適應(yīng) 那么我們?cè)撊绾尉珳?zhǔn)處理呢
二、使用方式
1.動(dòng)態(tài)讀取image大小
文檔地址
通過(guò)load方法得到原始圖片的寬高。
2.動(dòng)態(tài)設(shè)置style
這里是vue3的語(yǔ)法 供參考文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-540508.html
<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.動(dòng)態(tài)賦值
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`
}
}
總結(jié)
寬度百分百 高度自適應(yīng) 如果寬度大于某個(gè)值 設(shè)置最大值 如果小于 則取圖片寬度 通過(guò)bindload讀取寬度 然后動(dòng)態(tài)設(shè)置。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-540508.html
到了這里，關(guān)于微信小程序之Image那些事的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![微信小程序出現(xiàn)“[渲染層網(wǎng)絡(luò)層錯(cuò)誤] Failed to load local image resource”解決方法](https://imgs.yssmx.com/Uploads/2024/02/506620-1.png)
