uniapp image preview implementation
提示:下面案例可供参考
1. Use uni.previewImage on the app side to preview images
可去 uniapp官网 查看具体使用:(https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject)
2. The specific usage is as follows (example):
<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, // 是否可循环预览
})
}
At this point, the effect has basically been achieved, but please note a problem: data will be superimposed on the preview image, and multiple images will be generated in the list.
Reason: onShow will be triggered after uni.previewImage is executed.
解决方法:
data(){
return {
showFlag: true
}
}
onShow(){
if(this.showFlag){
// this.showFlag为true的时候才会执行 获取数据
}
}
// 多张 图片预览
previewImage(index,val) {
this.showFlag = false; //不允许再次触发onshow
// 此处代码省略
}