vue swiper 踩坑

由于需求要做成旋转木马的样式,所以项目现有的vant swiper组件貌似很难调成那个样式,所以找来找去,就入了swiper的坑

首先  vue项目先安装swiper

npm install swiper vue-awesome-swiper --save

然后在项目引入


当前页面引入


接下来是html



旋转木马样式

这个时候轮播图可以正常滚动了,但是缺少分页

不知道是不是因为版本原因,分页组件显示不出来,就自己动手写了一个。

于是问题就来了,获取不到轮播图的当前页面

那分页就无法准确判断到第几页了

搜了很多方法,最后发现slideChange可以检测滚动


如图


这样就能获取到当前页面的索引了,分页器根据索引来显示

你可能感兴趣的:(vue swiper 踩坑)