uniapp 四张图片 两张一排 其余的三张一排

1、html

	<!-- 引用或者转发图文 -->
	<view v-if="pOther[index].quote_info.photo_list" 
         :class="getImageClass(pOther[index].quote_info.photo_list.length)">
		 <view v-for="(j, ind) in pOther[index].quote_info.photo_list"
					class="image-wrapper" :key="'photo'+ind">
			<img :src="j" @click="ClickImage(pOther[index].quote_info.photo_list,j)" />
		 </view>
	</view>

2、js

		// 图片布局
			getImageClass(total){
					  if (total === 4 ) {
					  	 return 'images';  
					  } 
					  return 'image'; 
			},

3、css

	.image {
		display: flex;
		flex-wrap: wrap;	
		align-items: flex-start;
	}
	.image .image-wrapper {
		margin: 5px; 
		width: calc(33% - 10px);
	}
	.images{
		display: flex;
		flex-wrap: wrap;	
		align-items: flex-start;
		width: 70%;
	}
	.images .image-wrapper{
		margin: 5px; 
		width: calc(50% - 10px);
	}
	.image-wrapper img {
		width: 100%;
		padding: 0;
		margin: 0;
		height: 206rpx;
		object-fit: cover;
	}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值