uniapp相簿瀏覽

<template>
	<view class="pic">
		<view class="waterfall">
			<view v-for="(item, index) in list" :key="index" :data-id='item.id' class="waterItem" @tap="imgTap(item.image_url,list)">
				<image :src="item.image_url" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			params: '',
			list: [],
		};
	},
	onLoad(options) {
		this.params = options.id;
	},
	onShow() {
		let url = '/api/place/placeFishImges';//介面
		let data = {
			id: this.params//引數
		};
		this.$request.post(url, data).then(res => {
			this.list = res.data;//所有資料給資料區
		});
	},
	methods: {
		imgTap(url,list){
			//呼叫API
			uni.previewImage({
				current:url,
				urls:list.map(item=>item.image_url)
			})
		}	
	}
};
</script>

<style lang="scss">	
/* 瀑布流 */
.waterfall {
	width: 95vw;
	margin: 0 auto;
	column-count: 2;
	.waterItem {
		width: 330upx;
		height: 330upx;
		border: 1px solid #cccccc;
		border-radius: 10upx;
		overflow: hidden;
		margin-bottom: 20upx;
		image {
			width: 330upx;
			height: 330upx;
		}
	}
}


</style>