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

成品展示:

相关推荐
七夜zippoe20 分钟前
uniapp跳转页面时如何带对象参数
uni-app·携带参数
racerun1 小时前
UniApp中的pages.json 和 tabBar
uni-app·json
米粒宝的爸爸1 天前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz1 天前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw51 天前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 天前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
颜渊呐1 天前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长1 天前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
aklry2 天前
uniapp三步完成生成一维码图片
uni-app