uniapp 图片预览实现

uniapp 图片预览实现

提示：下面案例可供参考

一、app端 使用 uni.previewImage 进行图片预览

可去 uniapp官网 查看具体使用:(https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject)

二、具体使用如下（示例）：

<view v-for="(item,index) in housePhotoList" :key="index" >
	<image :src="item"  @click="previewImage(index,1)"></image>
</view>
<view v-for="(item,index) in AttorneyPhotoList" :key="index" >
	<image :src="item"  @click="previewImage(index,2)"></image>
</view>

// 多张 图片预览 
previewImage(index,val) {
    
     // index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
	if(val == 1){
    
    
		var photoList = this.housePhotoList.map(item => {
    
     // item 获取到的图片地址
			return item;
		});
	}else if(val == 2){
    
    
		var photoList = this.AttorneyPhotoList.map(item => {
    
    
			return item;
		});
	}
	uni.previewImage({
    
    
		current: index,     // 当前显示图片的索引值
		urls: photoList,    // 需要预览的图片列表，photoList要求必须是数组
		loop:true,          // 是否可循环预览
	})
}

写到此处基本实现效果了，但是注意一个问题: 预览图片会出现数据叠加，列表中图片会生成多张。
原因：uni.previewImage 执行完会后会触发onShow

解决方法：

data(){
    
    
    return {
    
    
        showFlag: true
    }
}
 
onShow(){
    
    
    if(this.showFlag){
    
    
		// this.showFlag为true的时候才会执行 获取数据
	}
}
 
// 多张 图片预览 
previewImage(index,val) {
    
     
    this.showFlag = false; //不允许再次触发onshow
	// 此处代码省略
}