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

Posted 2020-12-25 ctb-web

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