點(diǎn)擊圖片，實(shí)現(xiàn)預(yù)覽圖片功能，并且可循環(huán)預(yù)覽圖片列表！

image.png

一、多張圖片預(yù)覽

html代碼

js代碼

data(){

return {

photos:[

{ src: '圖片路徑1'},

{ src: '圖片路徑2'},

{ src: '圖片路徑3'},

……

]

}

},

methods: {

// 預(yù)覽圖片

previewImage(index) {

let photoList = this.photos.map(item => {

return item.src;

});

uni.previewImage({

current: index, // 當(dāng)前顯示圖片的鏈接/索引值

urls: photoList, // 需要預(yù)覽的圖片鏈接列表，photoList要求必須是數(shù)組

loop:true // 是否可循環(huán)預(yù)覽

});

},

}

圖片的css代碼自己設(shè)置就行啦

二、單張圖片預(yù)覽

html代碼

js代碼

data(){

return {

url: '圖片路徑'

}

},

methods: {

// 預(yù)覽圖片

previewImage(url){

let photoList = [];

photoList.push(img);

uni.previewImage({

current: 0,

urls: photoList // 圖片路徑必須是一個(gè)數(shù)組

});

},

}

總結(jié)

以上是生活随笔為你收集整理的html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。