uniapp中uni.getImageInfo渲染页面不生效的坑

uniapp中uni.getImageInfo渲染页面不生效的坑

  • 问题

写详情页(nvue页面)简介部分的时候发现那个大图片的高度不能自适应,后面的mode各种改变依然达不到想要的效果,又不能设置固定高度,所以只能js部分给它动态设置了

  • 解决

后来发现文档中有一个获取图片信息的方法:uni.getImageInfo(OBJECT)
在这里插入图片描述
在这里插入图片描述
我想要的正是这个图片的高度 height ,然后就在页面上写了代码:
在这里插入图片描述
可是把imgheight渲染到页面上时,图片的高度并没有做出任何改变。

后来才了解到原来uni.getImageInfo可能是一个异步方法

async imagesHeight() {
	let src = this.coursedetail.imageUrl;
	src = (await uni.getImageInfo({
		src
	}))[1].height;
	this.imgheight = src;
},

这样就完美解决我的问题了。

注意:这个height的单位是px,而uniapp我们一般用的是rpx适配的,所以在这里我们需要转换一下单位

this.imgheight = src / (uni.upx2px(src) / src);

猜你喜欢

转载自blog.csdn.net/yangsi0706/article/details/111669154