由于需求要做成旋转木马的样式,所以项目现有的vant swiper组件貌似很难调成那个样式,所以找来找去,就入了swiper的坑
首先 vue项目先安装swiper
npm install swiper vue-awesome-swiper --save
然后在项目引入
当前页面引入
接下来是html
旋转木马样式
这个时候轮播图可以正常滚动了,但是缺少分页
不知道是不是因为版本原因,分页组件显示不出来,就自己动手写了一个。
于是问题就来了,获取不到轮播图的当前页面
那分页就无法准确判断到第几页了
搜了很多方法,最后发现slideChange可以检测滚动
如图
这样就能获取到当前页面的索引了,分页器根据索引来显示