使用vant组件实现轮播和预览

在项目中使用vue对数据进行渲染，渲染完成后遍历所得图片数据，使用vant组件实现轮播和预览。

源代码如下：

首先在main.js中引入vant组件

html部分

<div class="img-banner">

        <van-swipe :autoplay="3000" :width="wWidth" >

                <van-swipe-item v-for="(image,index) in imgList" :key="image.banner_id" @click="picBanner(index)">

                        <img v-lazy="image.banner_thumb">

                </van-swipe-item>

        </van-swipe>

</div>

其中imgList为渲染得到的图片信息数据的数组，image.banner_thumb为图片的地址，index为循环遍历的索引值，picBanner（）方法为点击图片时进入预览，picBanner（index）中的index为方法中所用到的索引值作为参数，传递给方法。此部分以实现图片的轮播。

方法部分

picBanner(index