用的swiper2，出现这种情况，怎么解决

Posted 2023-04-17

参考技术A 你咋不去他的论坛问捏？
1.swiperAnimateCache(swiper)和swiperAnimate(swiper)是做每个slide里面那些小图片的css3动画的吧
2.progress是获取每个slide的移动位移的，从而根据他的位移来做切换动画

比方说当你向上拖动slide，拖到一半的时候，透明度（opacity）就变成原来的一半，移动距离（translate3d）和比例（scale）也会根据progress来变化
3.onSetTransition是一个回调函数，你可以参考下他的API。
4.如果你不想切得太快，就在每次切完后设定暂停时间，settimeout这样吧

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