如何解决swiper3无法在ie9中运行的bug

Posted 2023-05-08

参考技术A 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。随着浏览器版本的增多，解决IE浏览器兼容性显得尤为重要.一、!important (功能有限)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
例如:
#example
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */

二、CSS HACK的方法(新手可以看看，高手就当路过吧)
首先需要知道的是：
所有浏览器 通用 height:
100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height:
100px;
IE7、FF 共用 height: 100px
!important;
例如：
#example height:100px; /*FF */
* html #example height:200px; /* IE6 */
*+html #example height:300px; /* IE7 */
下面的这种方法比较简单本回答被提问者采纳 参考技术B https://github.com/nolimits4web/Swiper/issues/1241
换成swiper2

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