前言
- 图片容器宽度已确定
- 图片加载后,将图片容器按照图片的宽高比设置高度
思路
- 图片容器宽度已确定。
- uni-app的image组件,将
mode
设置为scaleToFill
(不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素)。 - uni-app的image组件提供了
@load
事件。在@load
事件中可以获得图片的宽、高。 - 获得图片的宽、高后,计算图片容器的高度。
- 使用内联样式,为图片容器设置图片高度。图片容器的宽高比与图片的宽高比一致。
操作步骤
- image组件设置:
mode
设置为scaleToFill
;内联样式设置图片高度
<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: {
loadImageList: function() {
var _this = this;
uni.request({
...
success: function(res) {
_this.imageList = res.data;
},
...
});
},
imageLoad: function(e) {
var _this = this;
var id = e.currentTarget.id;
var index = id.substr(3);
var item = _this.imageList [index];
const query = uni.createSelectorQuery().in(this);
query.select('#' + id).boundingClientRect(data => {
item.containerHeight = data.width * e.detail.height / e.detail.width;
_this.$forceUpdate();
}).exec();
}
}
}
</script>