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

<template>
	<view class="container">
		<view style="width: 100%;height: 200rpx;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" style="margin-bottom: 20rpx;">
			<text style="margin: 1.6%;font-size: 32rpx;">{{ item.time }}</text>
			<view :data-index="index">
				<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;"  :key="indexs" 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="imgs" :descs="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'
							}
						]
					},{
						time: '2020/8/2',
						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'
							}
						]
					}
				],
				imgs:[],
				descs: []
			};
		},
		onLoad() {
			this.staticList();
		},
		onNavigationBarButtonTap(e) {
		        uni.navigateTo({
		        	url: '/pages/family/listimage/uploadimg/uploadimg'
		        });
		},
		methods: {
			staticList(){
				const data=this.images[0].list;
				const data_img=[];
				const data_desc=[];
				for(var item of data){
					data_img.push(item.imgurl);
					data_desc.push(item.descs);
				}
				this.imgs=data_img;
				this.descs=data_desc;
			},
			
			//打开预览e
			previewOpen(e) {
				var param = e.currentTarget.dataset.src;
			console.log(e);
			
			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>