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

使用vant组件实现轮播和预览相关推荐

有赞Vant组件库的引入及轮播图片预览的实现
有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...
uniapp实现类似淘宝（京东）视频图片轮播和预览，并实现联动的效果（更新）
更新:这是一年前写的练手的前端项目,没想到这么多的评论和私聊,有好多没有写清楚的地方重新再完善一下.目前效果只在h5上进行测试成功,其他地方未测试,请见谅. 可以发现uniapp自带的图片预览不能完全 ...
php广告轮播效果,使用swiper组件实现轮播广告效果
这次给大家带来使用swiper组件实现轮播广告效果,使用swiper组件实现轮播广告效果的注意事项有哪些,下面就是实战案例,一起来看一下. 1.安装swipernpm install swiper@3 ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
Vue中通过el-upload组件实现上传前预览本地图片
1.实现效果如下图所示用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现 2.template(相当于html)部分的代码如下代码实现逻辑: 在el ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
vue组件之轮播图的实现
预览地址图片的轮播假设需要轮播三张图片(1,2,3),以前的思路就如图所示,添加两个节点.通过索引(index)的切换实现组件的无缝轮播. 这种想法的确可行,而且实现出来效果还不错. 缺点在于大 ...
如何实现轮播图的内容的多少随div的大小动态变化_小程序学习日志8：swiper滑动轮播组件（轮播图）（上）...
导读经过这段时间的学习,大家对小程序的编程和代码掌握的如何了呢? 今天我们来讲小程序里实现轮播图的方法,大家要专心看哦. 组件这个组件叫做滑块组件,嗯,听起来还挺形象的,你看滑动轮播图的时候是不是 ...
ionic组件-Slides轮播图
Slides轮播图组件 ionic中的轮播图组件是基于swiper插件,所以配置slides的属性需要在swiper的API中找: Swiper触摸滑动插件:https://www.swiper.co ...

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

使用vant组件实现轮播和预览相关推荐

最新文章

热门文章