html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表
生活随笔
收集整理的這篇文章主要介紹了
html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
點擊圖片，實現預覽圖片功能，并且可循環預覽圖片列表！
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 // 圖片路徑必須是一個數組
});
},
}
總結
以上是生活随笔為你收集整理的html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL之可视化软件
- 下一篇： AB伺服电机维修CAT MPM-B115