點擊圖片片部，實現(xiàn)預覽圖片功能，并且可循環(huán)預覽圖片列表！
uni-app官方文檔中档悠，有實現(xiàn)預覽圖片的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要求必須是數(shù)組
loop:true // 是否可循環(huán)預覽
});
},
}
圖片的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 // 圖片路徑必須是一個數(shù)組
});
},
}
