使用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"
            indicator-color="#f78927"
            @change="onChangeImg"
            :initial-swipe= this.current
            >
            <van-swipe-item v-for="(image, index) in images" :key="index" @click="showImagePreview(index)" >
                <img v-lazy="image" alt="圖片未顯示"/>
            </van-swipe-item>
        </van-swipe>  
        <van-image-preview 
            v-model="ImagePreviewShow" 
            :images="images" 
            :start-position = this.current
            @change="onChangeImagePreview"
            @close = "closeImagePreview"
            >
        </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,
            current:0,
        }       
    },
    mounted(){
             
    },
    methods: {  
        //得到圖片索引值       
        onChangeImg(index) {         
            this.index = index;  
        },  
        //顯示預覽圖
        showImagePreview(index){          
            this.ImagePreviewShow = true; 
            this.current = index;      
        },
        onChangeImagePreview(index){  
            this.index = index;                          
        },
        //關閉預覽圖
        closeImagePreview(info){
            this.current = info.index;
        },
    },

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