uniapp 图片按规定尺寸展示

例如：长图按照图1，宽图按照图2

图1：

图2： 

废话不多说直接上代码

html代码：

<image :src="v.imagesArr[0]"  :class="[v.isWidth?'discussion_imgs3':'discussion_imgs4']" mode="aspectFill"></image>

 css代码

// 宽图
	.discussion_imgs3{
		width: 410rpx;
		height: 310rpx;
		border-radius: 8rpx;
	}
	// 长图
	.discussion_imgs4{
		width: 290rpx;
		height: 390rpx;
		border-radius: 8rpx;
	}

js代码

ImageT(imgU,index) {
	// console.log(imgU)
	if(imgU){
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src: imgU,
			success: (image)=>{
				if(image.width>image.height){
							resolve(true);
						}else{
							resolve(false);
						}
			},
			fail(err) {
				// errs(err);
				reject('err')
			}
		});
	});
	}
},
funcYU(){//这个步骤在mounted声明周期调用
    await Promise.all(this.dataList.map(async (item,index) => {

	// 获取图片宽高
	
		item.isWidth = await this.ImageT(item.image)
			
	// // 获取视频宽高

		item.isVideoWidth = await this.ImageT(item.video_cover)


	console.log(item.isWidth,index,item.isVideoWidth)
	
}))
}

 看不懂的就请看我的废话，如下：

1.为什么要使用promise方法封装uni.getImageInfo？

答：因为uni.getImageInfo是异步函数

2.为什么要使用map来循环，不使用foreach？

答：因为foreach是没有return返回值的，foreach里面的回调函数因为加了async的原因，所以默认会返回一个promise，但是因为foreach的实现并没有返回值，所以要将foreach改成map，

如果不想使用map，也可以使用普通的for循环，就不用看第3点

3.为什么要使用Promise.all()？

答：map返回的并不是一个promise对象，而是一个包含promise对象的数组[promise, promise, promise]，其中每个promise对象都是循环迭代产生的结果。而await是处理不了数组的，它只能处理promise对象。Promise.all()这是一个专门处理promise数组的方法，当async标记的箭头函数返回一个promise对象时，map方法得到的就是一个promise对象数组，然后我们将这个数组丢给Promise.all()去依次执行，然后只需要使用await去等待执行结果，就能保证后面的end在得到结果后才会被输出。

4.数组的顺序可能会乱，需要排序

使用sort（）来排序

let arr = []

arr.sort((a,b)=>{
	return b - a
})

感谢大家观看我的废话！！！