点击图片，实现预览图片功能，并且可循环预览图片列表！
uni-app官方文档中，有实现预览图片的api，点击查看👇https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject
image.png
一、多张图片预览
html代码
<view class="">
<view class="" v-for="(item,index) in photos" :key="index" >
<image :src="item.src" @click="previewImage(index)"></image>
</view>
</view>
js代码
data(){
return {
photos:[
{ src: '图片路径1'},
{ src: '图片路径2'},
{ src: '图片路径3'},
……
]
}
},
methods: {
// 预览图片
previewImage(index) {
let photoList = this.photos.map(item => {
return item.src;
});
uni.previewImage({
current: index, // 当前显示图片的链接/索引值
urls: photoList, // 需要预览的图片链接列表，photoList要求必须是数组
loop:true // 是否可循环预览
});
},
}
图片的css代码自己设置就行啦
二、单张图片预览
html代码
<image :src="url" mode="" @click="previewImage(url)"></image>
js代码
data(){
return {
url: '图片路径'
}
},
methods: {
// 预览图片
previewImage(url){
let photoList = [];
photoList.push(img);
uni.previewImage({
current: 0,
urls: photoList // 图片路径必须是一个数组
});
},
}
