随手记: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>

成品展示:

相关推荐
雪芽蓝域zzs4 小时前
uniapp 国密sm2加密
uni-app
打不着的大喇叭14 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui14 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮16 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘3 天前
uniapp——地图路线绘制map
uni-app
shadouqi3 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩3 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤3 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app