vue封装组件swiper轮播组件

Posted 2023-03-09

参考技术A 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移动端轮播图的组件安装后没法使用？

我的vue的移动端轮播图组件安装后怎么没法使用

参考技术A import了吗，在当前页面， 或者检查下 package.json里面有没有安装成功。