uniapp小程序端点击预览图片并且左右手势切换图

前言

此篇文章主要讲述如何在uniapp端通过点击图片进入预览，手指外扩放大缩小图，左右手势切换下一张图。

1.点击图片进入预览
2.手指外扩放大缩小图
3.左右手势切换下一张图
4.长按保存图片到相册
5.uni.previewImage预览图片，uni.saveImageToPhotosAlbum保存图片

核心区域：

<view class="uni-list" v-for="(item, index) in displayList" :index="index" :key="index">
<image :src="item.allimage" @click="TanPreviewImage(index)" mode="scaleToFill"></image>
</view>

data() {
	return {
		phones: []
	};
},
		//点击图片进入函数，传入当前列表的索引index
		TanPreviewImage(indexa) {
				uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://21111889:8970/6_1597822634094.png"]
					current: indexa,//这里是判断到点击列表上的某个图片，就读取索引的图片
					urls: this.phones,//这是整个内容的图片数组，放一个数组里，就可以左右切换了
					longPressActions: { //长按保存图片到相册
						itemList: ['保存图片'],
						success: (data) => {
							console.log(data);
							uni.saveImageToPhotosAlbum({ //保存图片到相册
								filePath: payUrl,
								success: function() {
									uni.showToast({
										icon: 'success',
										title: '保存成功'
									})
								},
								fail: (err) => {
									uni.showToast({
										icon: 'none',
										title: '保存失败，请重新尝试'
									})
								}
							});
						},
						fail: (err) => {
							console.log(err.errMsg);
						}
					}
				});
			}

分享效果图：

新年新气象，2021年勇往直前，为梦而拼。希望帮助到更多努力的初学者，如果还有些迷惑不懂，欢迎指点与询问，后续还会继续发布更有创作的文章，期待日后更新…Aftrey.