uniapp实现预览图片并且左右手势切换图片:

1.使用文档:

2.使用过程:

<view v-show="attachmentList.length>0" v-for="(item,index) in attachmentList" :key="index" class="image">
	<view v-if="new RegExp(`.*\.${`(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg|jfif)`}`).test(item.filename)">
		<image :src="item.url" style="width: 80px; height: 80px;" @tap="previewImage(item.url)"></image>
	</view>
	<view v-else>
		<a :href="item.url" style="color:rgb(103, 137, 220)">{{item.filename}}</a>
	</view>
</view>

// 打开图片
previewImage(image) {
	var imgArr = []
	imgArr.push(image)
	if(this.attachmentList.length>0){
	  this.attachmentList.forEach(item=>{ //将其余图片链接放入数组中,实现左右滑动
		if(new RegExp(`.*\.${`(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg|jfif)`}`).test(item.filename)){//判断是否为图片
			if(image==item.url) return
			imgArr.push(item.url)
		}
	  })
	}
				
	uni.previewImage({
		urls:imgArr,
		current:imgArr[0]//点击时,显示当前第一个,也可以更改image(就不用imgArr.push(image)了)
	})
},

3、方案二：【只有纯图片】

<view class="example-body">
	<uni-file-picker title="身份证/驾驶证" readonly :value="imageList" :imageStyles="imageStyles" file-mediatype="image" />    //自带放大和左右切换功能
</view>


export default {
	data() {
		return {
			imageList: [],
			imageStyles: {
				width: 120,
				height: 120,
			},
		}
	},
	onLoad(){
		this.imageList=后台传的imageList
	},
	methods:{
	
	}
}