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

在项目中使用vue对数据进行渲染，渲染完成后遍历所得图片数据，使用vant组件实现轮播和预览。
源代码如下：
首先在main.js中引入vant组件
html部分

【使用vant组件实现轮播和预览】其中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（）将其初始化，目的是当用户点击图片时预览图片与点击图片相对应。