點擊圖片，實現預覽圖片功能，并且可循環預覽圖片列表！

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 // 圖片路徑必須是一個數組

});

},

}