vue封装组件swiper轮播组件

1.引入swiper（这里引入的是5.4.1版本）

在cmd命令行

cnpm install --save swiper@5.4.1

2.Swiper组件的封装(封装方法参考swiper官网)

//===>src/views/Film/Swiper.vue 

3.在Film组件中使用swiper，并为轮播图赋值

轮播图数据

这里 给swiper设置key的目的是，因为网络请求是异步的，swiper组件在mounted生命周期中先初始化了，此时swiper里面并没有数据。当请求数据回来的时候，系统认为swiper没有变化，所以不会刷新布局，导致swiper组件的展示出现一些bug。所以添加key组件，当looplist的长度发生改变时，系统通过diff算法，来刷新swiper。

//===>src/views/Film.vue 

效果

链接：https://www.jianshu.com/p/c161f90156d1

vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4"，用npm install自动安装依赖时装的版本为"version": "2.6.7"，而单独安装（npm install vue-awesome-swiper@2.5.4）的则是正常的"version": "2.5.4"。

这两个版本都是基于swiper3的，

而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件（类似于swiper4）。

并且2.6.7版本swiper位于node_modules/vue-awesome-swiper/node_modules下；2.5.4不需要单独引入样式文件，并且swiper直接位于node_modules文件夹下。

废话不啰嗦，上图为敬

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

然后查看了配置文件 vite.config.js 添加 resolve.alias ，如下

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

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

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

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

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

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

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

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

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

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

点赞加关注，永远不迷路

---