随手记：uniapp图片展示，剩余的堆叠

UI效果图：

 

实现思路：
循环图片数组，只展示几张宽度就为几张图片+边距的宽度，剩下的图片直接堆叠展示

点击预览的时候传入当前的下标，如果是点击堆叠的话，下标从堆叠数量开始计算
 

<template>
	<!-- 查看图片展示 -->
	<view class="image pos-re" :style="imageStyle">
		<u-image :width="width" :height="height" :src="formatImgUrl(item)" border-radius="8" :style="imgStyle" class="img" v-for="(item, index) in imagesList" @click="previewImage(0, index,item)"></u-image>
		<view class="mask pos-ab" :style="maskStyle" v-if="imagesList.length > 4" @click="previewImage(1, 3)">
			<u-icon name="plus" size="28" color="#FFFFFF"></u-icon>
			{{imagesList.length+1  - imgNum }}
		</view>
	</view>
</template>
 
<script>
export default {
	name:"showImage",
	props:{
		imagesList: {
			type: Array,
			default: () => {
				return []
			},
		},
		width: {
			type: [String, Number],
			default: 104,
		},
		height: {
			type: [String, Number],
			default: 104,
		},
		// 图片之间的右边距
		marginRight: {
			type: [String, Number],
			default: 10,
		},
		// 保留照片数
		imgNum: {
			type: [String, Number],
			default: 4,
		}
	},
	data() {
		return {
			baseFileUrl: process.uniEnv.BASE_FILEURL,
			imageStyle: {
				'width': '0rpx',
				'overflow': 'hidden'
			},
			imgStyle: {
				'margin-right': '0rpx',
			},
			maskStyle: {
				width: '0rpx',
				height: '0rpx'
			},
		}
	},
	onLoad() {
		
	},
	watch: {
		imagesList:{
			handler(nV,oV){
				this.imgStyle.marginRight = this.marginRight + 'rpx';
				this.imageStyle.width = (this.width * this.imgNum ) + (this.marginRight * this.imgNum-1) + 'rpx';
				this.maskStyle.width = this.width + 'rpx';
				this.maskStyle.height = this.height + 'rpx';
				this.maskStyle.lineHeight = this.height + 'rpx';
				this.maskStyle.right = 0 + 'rpx';
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		formatImgUrl(img) {
			if (!img || img == '/static/images/image_noData.png') {
				return '/static/images/image_noData.png'
			}
			let imgs = img.split(',');
			return this.baseFileUrl + imgs[0]
		},
		previewImage(num, index, item) {
			let arr = [];
			if(this.imagesList.length){
				this.imagesList.forEach(item => {
					arr.push(this.baseFileUrl + item )
				})
			}
			if(!num) {
				uni.previewImage({
					current:index,
					urls: arr
				})
			}else{
				uni.previewImage({
					current: 3,
					urls: arr
				})
			}
		}
	}
}
</script>
 
<style lang="scss" scoped>
	.image{
		display: flex;
		.img{
			flex-shrink: 0;
		}
		.mask{
			text-align: center;
			background: '#1F2533';
			border-radius: 8rpx;
			opacity: 0.9;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>

成品展示：