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

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

源代码如下：

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

html部分

其中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（）将其初始化，目的是当用户点击图片时预览图片与点击图片相对应。