lineage-app/pages/family/listimage/listimage1.vue

<template>
	<view class="container">
		<view style="width: 100%;height: 250rpx;padding: 20rpx;">
			<view style="font-size: 24px;">家族合影</view>
			<view style="font-size: 16px;color: #8f8f94;">134张/照片</view>
		</view>
		
		<view v-for="(item, index) in images" :key="index">
			<text style="margin: 1.6%;font-size: 28rpx;">{{ item.time }}</text>
			<view :data-index="index">
				<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;" v-for="(items, indexs) in item.list">
					<image style="width: 100%;height: 100%;" :src="items.imgurl" :data-src="items.imgurl" @tap="previewOpen"></image>
				</view>
			</view>
		</view>
		<previewImage ref="previewImage" :opacity="0.8"  :imgs="images[0].imgurl" :descs="images[0].descs" @longPress="longPress"></previewImage>
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	
	export default {
		components: { previewImage }, //注册插件
		data() {
			return {
				images: [
					{
						time: '2020/8/1',
						list: [
							{
								imgurl: '../../../static/img/family/listimage/1.jpg',
								descs: '合照1'
							},{
								imgurl: '../../../static/img/family/listimage/2.jpg',
								descs: '合照2'
							},{
								imgurl: '../../../static/img/family/listimage/3.jpg',
								descs: '合照3'
							}
						]
					}
				],
			};
		},
		onNavigationBarButtonTap(e) {
		        uni.navigateTo({
		        	url: '/pages/family/listimage/uploadimg/uploadimg'
		        });
		},
		methods: {
			//打开预览e
			previewOpen(e) {
				var param = e.currentTarget.dataset.src;
				console.log(param);
			
				this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号
				return; //如需测试和uni原生预览差别可注释这两行
			
				//以下是效果对比相关
				var _this = this;
				uni.showModal({
					title: '请选择',
					content: '请选择使用uni原生图片预览或非原生自定义的图片预览。',
					cancelText: 'uni',
					confirmText: '自定义',
					success: function(res) {
						if (res.confirm) {
							_this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号
						} else if (res.cancel) {
							uni.previewImage({
								current: param,
								urls: _this.imgs
							});
						}
					}
				});
			},
			//长按事件
			longPress(data) {
				console.log(data);
				uni.showModal({
					showCancel: false,
					title: '长按事件',
					content: '已触发长按事件,你可以在这里做更多',
					success: showResult => {
						
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 110rpx;
		width: 100%;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 26rpx;
		color: #999999;
	}
</style>