前言

• 圖片容器寬度已確定
• 圖片加載后，將圖片容器按照?qǐng)D片的寬高比設(shè)置高度

思路

• 圖片容器寬度已確定。
• uni-app的image組件，將mode設(shè)置為scaleToFill（不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素）。
• uni-app的image組件提供了@load事件。在@load事件中可以獲得圖片的寬、高。
• 獲得圖片的寬、高后，計(jì)算圖片容器的高度。
• 使用內(nèi)聯(lián)樣式，為圖片容器設(shè)置圖片高度。圖片容器的寬高比與圖片的寬高比一致。

操作步驟

image組件設(shè)置：mode設(shè)置為scaleToFill；內(nèi)聯(lián)樣式設(shè)置圖片高度

<div class="zbox" v-for="(item,index) in imageList" :key="index"><image :id="'img'+index" :src="item.url" mode="scaleToFill" class="cover_img" @load="imageLoad":style="{height: item.containerHeight + 'px'}"></image> </div>

s

<script>export default {components: {},data() {return {imageList: [], //圖片列表}},onLoad(options) {this.loadImageList();},methods: {/* 調(diào)用接口，從服務(wù)器獲取圖片列表 */loadImageList: function() {var _this = this;uni.request({...success: function(res) {_this.imageList = res.data;},...});},imageLoad: function(e) {var _this = this;/* 圖片容器的id */var id = e.currentTarget.id;/* 圖片容器對(duì)應(yīng)數(shù)組數(shù)據(jù)的索引 */var index = id.substr(3);/* 圖片容器對(duì)應(yīng)的數(shù)據(jù) */var item = _this.imageList [index];/* 查詢圖片容器的寬度 */const query = uni.createSelectorQuery().in(this);query.select('#' + id).boundingClientRect(data => {/* 計(jì)算圖片容器的寬度 */item.containerHeight = data.width * e.detail.height / e.detail.width;/* 強(qiáng)制刷新。如不強(qiáng)制刷新，則圖片容器高度不會(huì)改變 */_this.$forceUpdate();}).exec();}}} </script>

總結(jié)

以上是生活随笔為你收集整理的【uni-app】动态计算图片高度且保持宽高比的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。