vue swiper 踩坑

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

首先  vue项目先安装swiper

npm install swiper vue-awesome-swiper --save

然后在项目引入


当前页面引入


接下来是html



旋转木马样式

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

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

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

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

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


如图


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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 现象: 在安卓低版本手机(版本5.1)上白屏问题,在问题机型后复现问题后发现报错。 找到对应的行发现: 结论:解构...
    ddai_Q阅读 5,904评论 1 4
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,297评论 0 1
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    随行者pgl阅读 3,548评论 0 15
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    柴东啊阅读 15,965评论 2 140
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    小姜先森o0O阅读 10,135评论 0 72

友情链接更多精彩内容