BD-LDBD-UNI/pages/shop/shopDetail/shopPhotoAlbum/index.vue

<!-- html -->
<template>
	<view class="container">
		<view class="left">
			<image v-for="(item,index) in leftList" :key="index" @tap="previewImage(item.id)" :src="item.url" alt=""
				mode="widthFix"></image>
		</view>
		<view class="right">
			<image v-for="(item,index) in rightList" :key="index" @tap="previewImage(item.id)" :src="item.url" alt=""
				mode="widthFix"></image>
		</view>
	</view>
</template>


<script>
	export default {
		components: {},
		data: function() {
			return {
				setMealList: [],
				// 初始化左右盒子
				leftList: [],
				rightList: [],
				// 初始化左右盒子高度
				leftH: 0,
				rightH: 0,
				baseImagePath:this.baseImagePath
			}
		},
		onLoad(options) {
			let data = options.photo.split(',')
			data.forEach(item=>{
				let img = {
					url : this.baseImagePath+item
				}
				this.setMealList.push(img)
			})
			console.log(data);
			this.doList()
		},
		methods: {
			async doList() {
				const that = this
				for (let index in this.setMealList) {
					// 获取图片宽高
					await this.getImageInfo(index).then((res) => {
						// 计算图片渲染高度
						let showH = (50 * res.height) / res.width
						// 判断左右盒子高度
						if (that.leftH <= that.rightH) {
							that.leftList.push(this.setMealList[index])
							that.leftH += showH
						} else {
							that.rightList.push(this.setMealList[index])
							that.rightH += showH
						}
					})
				}
			},
			async getImageInfo(index) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: this.setMealList[index].url,
						success: (image) => {
							resolve(image)

						},
					})
				})

			},
			previewImage(index) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.setMealList.map(item => item.url) //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5; 
	}
	.container {
		padding: 0 30rpx;
		font-size: 14rpx;
		line-height: 24rpx;
		padding-top: 21rpx;
	}

	.right,
	.left {
		display: inline-block;
		width: 49%;
		vertical-align: top;
		border-radius: 10rpx;
	}

	.left {
		margin-right: 2%;
	}

	.left image,
	.right image {
		border-radius: 10rpx;
		width: 100%;
		margin-bottom: 10rpx;
	}
</style>