Uniapp 点击图片放大

发布于:2024-04-26 ⋅ 阅读:(26) ⋅ 点赞:(0)

1、html(循环图片)

	<view v-for="(i,index) in photo_list" :key="'photo'+index">
		<img :src="i" alt="" @click="ClickImage(photo_list,i)" />
	</view>

2、js(方法)

			ClickImage(PhotoAddress, index) {
				uni.previewImage({
					urls: PhotoAddress, //需要预览的图片http链接列表
					current: index, // 当前显示图片的http链接,默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

ClickImage方法参数的意思:

photo_list:图片路径列表 ['https://img0.baidu.com/it/u=2519000851,2866084026&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=5051e08182f3394eee55e261b0c4db68','https://img0.baidu.com/it/u=3527186857,442667915&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=3e8686f2f8c37a7b273756c32a31a201','https://img1.baidu.com/it/u=4285143278,687630500&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=9cdccbb26aee6441751f0b7579799fb0']
i:当前图片的路径
 如:https://img0.baidu.com/it/u=3527186857,442667915&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714150800&t=3e8686f2f8c37a7b273756c32a31a201