uniapp 实现多张图片预览

<template>
	<view>
		<view>预览图片view>
		<view class="photosView">
			<block v-for="(item, index) in photos" :key="index">
				<view class="box"><image :src="item.src" mode="widthFix" @click="previewImage(index)">image>view>
			block>
		view>
	view>
template>

<script>
export default {
      
	data() {
      
		return {
      
			photos: [
				{
      
					id: '1',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923709&di=dda3e0b4d055c8dfaaaa9168c570983a&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170331%2F20170331113141_98c8105e504ff71e68d59a6eaa30bd7e_5.jpeg'
				},
				{
      
					id: '2',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923711&di=6b8dfec17f7be8213ae23db6e1b7719a&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170509%2F20170509200320_7dacf48b2bcc4b4ab7a0412b333ccb99_6.jpeg'
				},
				{
      
					id: '3',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807858562&di=262d91cfb1292942a257d17973a4843c&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170303%2F20170303094555_7851ce3d965701f3201d4df2dde56592_8.jpeg'
				},
				{
      
					id: '4',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923711&di=61c1d93f123d6039af37727812c64456&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170318%2F20170318103604_eea6fa2eab8da83f770158463b7201f7_2.jpeg'
				}
			]
		};
	},
	methods: {
      
		previewImage(index) {
      
			let photoList = this.photos.map(item => {
      
				return item.src;
			});
			uni.previewImage({
      
				current: index,
				urls: photoList
			});
		}
	}
};
script>

<style scoped lang="less">
* {
      
	margin: 0;
	padding: 0;
}
.photosView {
      
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.box {
      
		width: 30%;
		image {
      
			width: 100%;
			height: 100%;
		}
	}
}
style>