点击图片,实现预览图片功能,并且可循环预览图片列表!
image.png
一、多张图片预览
html代码
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代码
js代码
data(){
return {
url: '图片路径'
}
},
methods: {
// 预览图片
previewImage(url){
let photoList = [];
photoList.push(img);
uni.previewImage({
current: 0,
urls: photoList // 图片路径必须是一个数组
});
},
}