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
        })
    }
}