在项目中使用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){
for(var i= 0; i < this.bannerlength; i++) {
this.bannerlist[i] = this.imgList[i].banner_thumb;
}
ImagePreview({
images:this.bannerlist,
startPosition:index
})
}
this.bannerlength表示的是得到的图片有几个，for循环部分是得到展示图片的地址，并将他们放在一个数组中。使用imagePreview（）方法则参考vant种的文档。startPosition是初始化位置，当用户点击某一张图片时，得到他在数组中的索引值，并将此值传递给imagePreview（）将其初始化，目的是当用户点击图片时预览图片与点击图片相对应。
