swiper插件报错 vue_解决几个vue中是swiper插件遇到的bug

1、在使用swiper插件的时候，如果内容都是静态资源的话不会出现错误，但是动态的话会出现划不动，或者白屏

分析：这种bug是怎样出现的，一般都是初始化的位置不对

方法：

swiperInit() {

var mySwiper = new Swiper('.swiper-container', {

pagination : '.swiper',

paginationType : 'bullets',

autoplay : 200,

})

}

//这个是swiper的初始化方法，如果你是在created钩子函数中执行的那么，肯定会出现bug，如果你在moutend里面初始化，

//就要看你的请求数据是在哪里执行的，如果在初始化之后，同样会出现bug，我个人建议，在updated钩子函数里面取初始化，

//因为这时候数据变化了以后，资源准备完毕了

2、移动端项目中，手机版本低的时候，会出现什么都没有的情况

分析：这种bug出现的情况还是比较多的，如果兼容低版本，你就需要知道，部分低版本不兼容es6，而swiper使用了es6语法

方法：

//1.解决方法是在项目根目录下新建一个文件vue.config.js，在里面添加如下代码：

module.exports = {

chainWebpack: config => {

config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)

}

}

//2.这种方法就是强推，也就是不兼容太低的版本，因为也没有多少人用那么老的系统版本，如果遇到了，用户反馈，让他升级，对于我们前端人员来说这种方式是最好的！