先说说在vue中如何引用swiper
1.npm命令安装swiper
npm install swiper --save-dev
2.在需要用到swiper插件的组件中引入swiper
js中 import Swiper from "swiper"
css中 @import "swiper/dist/css/swiper.css";
3.初始化swiper
如上步骤完成之后，可以看看基本上我们在使用swiper的时候都会遇到的bug
最近有一个新需求如下：
我打算用swiper实现，以下是使用swiper常见的一些bug
1.使用静态数据时，页面可以正常滑动，一旦使用动态数据，页面就无法滑动，数据显示也不正常
理想： 每排放四个，且可以左右滑动
现实： 数据都不出来，而且无法进行左右滑动
解决办法: 就是添加一个observer属性
页面写法
2.使用v-if条件，让swiper动态显示的时候，swiper也会出现如下bug效果
需求：选择下拉框中的转运，才出现如右所示的swiper切选
结果我添加了if条件之后，swiper界面混乱，且无法进行切换
解决办法：添加observeParents属性
页面写法
这样问题就解决了，当然swiper可能还有其他坑，我暂时还没遇到，欢迎评论下方提示
网友评论