vue-awesome-swiper

参考资料：

1 >

业务场景是vant组件库的Popupd窗中包裹着vue-awesome-swiper组件，swiper组件中包含better-scroll，轮播swiper是横向滑动的，而better-scroll是纵向滚动。

Vue项目中使用swiper组件，swiper中的数据是接口返回，得到接口的数据再初始化swiper，但是开始的时候，swiper无法拖动，看了半天官方文档，发现有个width属性，可以控制swiper的宽度，主要是针对隐藏情况下初始化swiper。

这样就解决了无法拖动的问题。

swiper的width设置官方文档：

>

废话不啰嗦，上图为敬

因为我是vite构建的v3项目，使用官方示例Demo， npm install 之后运行，上来就报错

然后查看了配置文件 viteconfigjs 添加 resolvealias ，如下

接着我还需要拷贝一份dist到我项目中，想想哪里不对，我肯定是被文档带偏了，我明明是npm 引入库的方式，这是要我马路上扛着自行车奔跑嘛不是，放弃。

再回到官方文档，找到了API方法

试了不行，打印swiper传参params等参数，凡是能改 direction 属性的，都试了，滚动一页，然后其他页面不见了，再次放弃。

放弃了查看官方文档，跑去**看博客，似乎发现了惊喜，然后一顿 *** 作，垂直滚动的效果有了，但是滚动了一页就再也不能滚动了是什么意思。

然后继续回到swiper官方文档，思考着是不是需要JS创建swiper才行能，继续尝试，无果。

然后去 github 上找找灵感，发现了哪位大佬写的 vue-awesome-swiper ，安装继续尝试，不行，发现极少维护了，也没有对swiper 732做支持，放弃。

继续**，再次发现了什么，一评论区的小菜给 swiper ，swiper-slide 加了固定宽度，就这样，有了！！！

感谢小菜，远离大佬，珍爱生命。

到此，距离解决问题已经过去了12个小时，期间茶水不思，头发掉了若干。

打工人打工魂，十年打工人上人。

点赞加关注，永远不迷路

以上就是关于vue-awesome-swiper全部的内容，包括:vue-awesome-swiper、Vue-Awesome-Swiper基本能解决你所有的轮播需求、关于在vue中使用vue-awesome-swiper和better-scroll和vant遇到的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！