Vant—vue+vant图片懒加载+图片预览

1、引入图片预览的组件

import { ImagePreview } from 'vant'

2、页面布局

<div
    v-for="(item2, index) in albumList"
    :key="index"
    class="album-item"
>
<img
    v-lazy="item2"
    alt="图片未显示"
    class="lazy-img"
    @click="getImg(index)"
/>
</div>

3、js

data() {
    return {
        albumList: []
    }
},
created() {
    this.albumList = photoList[this.id].list // 需要展示的数组
},
methods: {
    getImg(index) { // 点击图片的时候传入数组进行预览，并且传递index，显示是当前点击的图片是数组中的第几个
        ImagePreview({
            images: this.albumList,
            showIndex: true,
            loop: false,
            startPosition: index
        })
    }
}