当前位置: 首页 > Web前端 > HTML5

vue-swiper基于Vue2.0开发轻量级高性能轮播插件

时间:2023-04-05 15:24:33 HTML5

Vue-swiper基于Vue2.0开发,基本满足轻量级高性能轮播插件的大部分功能。目前支持无缝自动轮播、无限轮播、不引入第三方库的手势轮播,原生js包,打包后大小仅8.2KBInstallnpmivue-swiper-component--savecnpmivue-swiper-component--save//国内镜像Usageimport{Swiper,Slide}from'vue-swiper-component';components:{Swiper,Slide}//异步加载轮播图片情况0">//同步加载轮播图123//添加一些参数配置0":autoPlay='true':showIndicator='true'interval="2500"duration="500">//添加点击事件API属性表示默认autoPlay是否自动旋转trueshowIndicator是否显示旋转的点trueinterval每隔两次滚动一次2500duration每次滚动一个页面需要多长时间500?Swiper上面还暴露了其他方法,on在Swiper标签中添加ref属性,例如:?this.$refs.swiper.prevSlide();//上一张图片?this.$refs.swiper.nextSlide();//下一张图片?this.$refs.swiper.slideTo(2);//某个图片事件transitionend事件每次旋转都会发送参数,表示在Swiper上旋转添加的图片数量//@transtionend="getNum"getNum(data){console.log(data);}click事件各个carouselview上的事件其他可以通过重写我的样式来自定义样式,可以在Slide标签中写div或者其他参数配置,参考上面Usage的第三个例子。对于异步渲染,添加v-if保证渲染成功。参考第一个例子。如有其他问题,可邮件交流,452216418@qq.com;暂时对PC支持不是很友好,以后有时间可以补充;