[每天进步一点点~] uni-app 点击图片实现预览图片列表

点击图片，实现预览图片功能，并且可循环预览图片列表！

uni-app官方文档中，有实现预览图片的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要求必须是数组
            loop:true   // 是否可循环预览
        });
    },
 }

图片的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 // 图片路径必须是一个数组
        });
      },
}