使用vant的Swipe 輪播van-swipe 和ImagePreview 圖片預覽van-image-preview 和Lazyload 懶加載 實現點擊哪張輪播圖，哪張圖預覽

ImagePreview組件調用，images需要傳入圖片數組，當前的需求ImagePreview不需要輪播，只需要顯示點擊的輪播圖的單張圖。

 

1/main.js文件中，引入和注冊vant

import Vant from "vant";
Vue.use(Vant);
 
//圖片懶加載配置項
import {
      Lazyload
} from "vant";
Vue.use(Lazyload, {
      lazyComponent: true,
});

2/ vue文件中，頁面結構

<template>
    <div class="detail_contant">
            <van-swipe :autoplay='3000' @change="onChangeImg" >
                <van-swipe-item v-for="(image, index) in images" :key="index" @click="showImagePreview" >
                    <img v-lazy="image" alt="圖片未顯示"/>
                </van-swipe-item>
            </van-swipe>  
            <van-image-preview
                v-model="ImagePreviewShow"
                :images="imagesLists"
            >
            </van-image-preview>             
    </div>
</template>

<script>
export default {
    data(){
        return{
            images: [
                require('@/assets/[e-mail]'),
                require('@/assets/[e-mail]'),
                require('@/assets/[e-mail]'),
                require('@/assets/[e-mail]'),
                require('@/assets/[e-mail]'),
            ],
            ImagePreviewShow: false,
            index: 0,
            imagesLists: [],
            imgIndex:0,
        }       
    },
    mounted(){     
    },
    methods: {  
　　　　　//得到圖片索引值       
        onChangeImg(index) {
            this.index = index;
        },  
        //顯示預覽圖
        showImagePreview(){ 
            this.imgIndex = this.index;    
            this.ImagePreviewShow = true; 

            this.imagesLists = this.images.map((item)=>{
                return item; }) this.imagesLists = this.imagesLists.filter((item,index ) =>{ return index == this.imgIndex ; }) 　

 }, }, } </script> <style lang="scss" scoped> .detail_contant{ .van-swipe{ width: 100%; .van-swipe-item { height: 100%; color: #fff; font-size: 20px; height: 6.16rem; text-align: center; vertical-align: middle; img{ width: 100%; height: 100%; } } /deep/ .van-swipe__indicators{ bottom:.27rem; /deep/ .van-swipe__indicator{ width: .25rem; height:.25rem; background: #e9e3d8; opacity: 1; &:not(:last-child){ margin-right:.26rem; } &.van-swipe__indicator--active{ background: #f78927; opacity: 1; } } } } .van-image-preview{ /deep/ .van-image-preview__index{ display: none; } } } </style>