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// 此处代码省略
}