效果图
这里需要作两个判断,第一个判断是内容里是否传入了视频,有则显示视频遮罩层,第二个判断是内容里的图片长度是否超过3个,如超过则显示多图遮罩层
<view class="img">
<view v-for="(item, index) in imglist" :key="item.id" v-show="index < 3">
<image :src="item.url" alt="" />
</view>
<view
v-if="imglist.length != 0"//这里的判断是随便取的,实际应该是判断是否传入video
>
<!-- <view> +{{ imglist.length - 2 }} </view> -->
//上条代码可显示剩余图片数量,这里注释掉了
<view class="havevideo">
<image src="@/static/play.png" class="imgplay" alt="">
<view class="txtvideo">视频</view>
</view>
</view>
<view
v-if="imglist.length > 3"
>
<!-- <view> +{{ imglist.length - 2 }} </view> -->
//上条代码可显示剩余图片数量,这里注释掉了
<view class="more">
<image src="@/static/duotu.png" class="imgmore" alt="">
<view class="txtmore">多图</view>
</view>
</view>
</view>
data() {
return {
imglist: [
{ url: "/static/baoliao1.png" },
{ url: "/static/baoliao2.png" },
{ url: "/static/daye.png" },
{ url: "/static/daye.png" },
{ url: "/static/daye.png" },
],
};
},
.img {
display: flex;
position: relative;
image {
width: 215rpx;
height: 215rpx;
margin: 26rpx 16rpx 0 0;
}
.havevideo {
display: flex;
flex-direction: column;
position: absolute;
text-align: center;
width: 215rpx;
height: 215rpx;
top: 26rpx;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
.imgplay {
width: 70rpx;
height: 70rpx;
margin: 55rpx 0 0 73rpx;
}
.txtvideo {
color: rgba(255, 255, 255, 54);
font-size: 14px;
}
}
.more {
display: flex;
flex-direction: column;
position: absolute;
text-align: center;
width: 215rpx;
height: 215rpx;
top: 26rpx;
right: 16rpx;
background-color: rgba(0, 0, 0, 0.5);
.imgmore {
width: 48rpx;
height: 48rpx;
margin: 66rpx 0 0 85rpx;
}
.txtmore {
color: rgba(255, 255, 255, 54);
font-size: 14px;
}
}
}