vue使用swiper2.7.6兼容ie9及以上

最新推荐文章于 2024-06-07 17:03:35 发布
最新推荐文章于 2024-06-07 17:03:35 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 插件使用 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45809419/article/details/107863309
版权
在面临浏览器兼容问题时，发现Swiper在IE9下报错。研究发现，Swiper3以上版本不支持IE9，需使用Swiper2.7.6。本文介绍了如何通过npm或直接下载引入Swiper2.7.6，并展示了相关代码实现。
摘要由CSDN通过智能技术生成

公司的项目最近要做浏览器兼容，项目中使用的swiper在ie9下控制台会一直报错"无法获取未定义或 null 引用的属性“contains ”"

百度了解了下原因：

Swiper3以后的主要是针对移动端的，要兼容ie9及以下的话需要使用swiper2.X

swiper各版本兼容性：

swiper2：pc端（IE7+），部分移动端浏览器

swiper3：pc端（IE10+），部分移动端浏览器

swiper4：移动端浏览器、部分PC端浏览器、IE10+

图片来源：https://blog.csdn.net/qq_39025670

最低0.47元/天 解锁文章
小白家的兔兔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用第三方例子 —— swiper
qq_45947664的博客
11-01 1644
纯js打造的开源 、强大的触摸滑动插件 ，面向移动端。可实现触屏焦点图、触屏Tab切换、触屏轮播图切换等效果。1.1.1 使用终端执行命令，进行安装，save命令进行保存到package.json中。1.1.2新建轮播图组件。效果：多了显示当前位置的指示器，高亮显示。1.1.4 添加指示器。1.1.3主组件引入。
基于Swiper实现移动端页面图片轮播效果
08-28
主要为大家详细介绍了基于Swiper实现移动端页面图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 使用swiper时，ie浏览器的兼容问题
ZCJSGSZ的博客
11-27 1065
vue项目使用swiper时，无法兼容ie浏览器。 解决办法：引入swiper，在页面上使用div class命名的方式 plugins: [ "@/plugins/swiper", ] <div class="swiper-box"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide class="swiper-s.
VUE2.7项目配置webpack打包-详细操作步骤
最新发布
CC酱写前端的博客
06-07 1797
Webpack是一个打包工具，可以把JS、CSS、Node Module、Coffeescrip、SCSS/LESS、图片等都打包在一起，因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。GitHub为https://github.com/webpack/ webpack。
在vue项目中使用swiper2.7.6
anmi7832的博客
10-12 618
$ npm install swiper@2.7.6 --save-dev npm WARN rollback Rolling back node-pre-gyp@0.10.0 failed (this is probably harmless): EPERM: operation not permitted, scandir 'F:\test\text-vue\test\n...
swiper的兼容性（IE、chrome等）
热门推荐
weixin_43074269的博客
06-05 1万+
前几天在开发页面过程中，使用到的swiper插件做轮播图时，遇到了一些问题，chrome、360、QQ浏览器中都能正常显示，在IE10浏览器中显示正常，但是在IE9及以下不能使用。 原因：swiper插件适用于移动端，PC端上面有版本兼容问题，在IE9及以下，使用swiper2的任何版都可以，swiper2 还是很强大的；在IE10以上，以及其他的浏览器，swiper的版本都可以用。所以现在大家在...
swiper2.7.6常用效果整理
weixin_33736649的博客
02-15 1188
swiper2.7.6官网 在线预览：swiper2.7.6_demo 下载 1.swiper-基础效果 &lt;div class="swiper_demo swiper_demo1"&gt; &lt;div class="swiper-container"&gt; &lt;div class="swiper-wrapper"&gt; &
vue/cli 5.0.1 ＋vue 2.7.1 兼容ie11
qq_34458968的博客
08-26 1651
vue兼容ie
vue兼容IE11
杨飞@益术
02-19 2342
三个步骤 1.package.json -&gt; dependencies增加"babel-polyfill": "^6.26.0"（版本号可以根据npm install --save babel-polyfill拿到） 2.main.js -&gt; 增加import "babel-polyfill" 3.index.js -&gt; 增加import "babel-p...
vite+vue3降级到vite+vue2.7来适配IE
henudxk的博客
03-23 1440
因为我的项目中用到了web worker，web worker会打包成单独的文件，我已经装了web worker插件rollup-plugin-web-worker-loader，感觉应该好使，但是在IE中报错，开始以为是IE不认识web worker，折腾好久找loader，后来发现不是，因为我在webworker中使用的async await的原因，不知道为什么web worker中的async await IE不识别，而主线程代码的中就可以，这里的需要改成传统的回调函数。这是新的vue2.7写法。
swiper插件兼容问题及版本选择
weixin_43990297的博客
11-25 5096
swiper插件适用于移动端，PC端上面有版本兼容问题，在IE9及以下，使用swiper2的任何版都可以，swiper2 还是很强大的；在IE10以上，以及其他的浏览器，swiper的版本都可以用。所以现在大家在开发的时候，移动端采用swiper的所有版本都可以，PC端采用swiper2版本。 ...
idangerous.swiper.min.js
11-05
idangerous.swiper.min.js资源下载；idangerous.swiper.min.js资源下载；
vue 新建项目在IE9 10 打不开
前端技术分享
12-17 5875
并不是webpack配置问题。也不是babel没编译。 这个锅其实是 webpack-dev-server的问题。它里面通过socket给浏览器的代码有 部分 es6的代码 如 const 这些。然后这种东西ie11以下并不认识 我的解决方式是找到 /node_modules/webpack-dev-server 下的client文件夹用老项目的文件替换掉这个文件就可以了，
The Last Naruto,兼容IE11的vue脚手架
Senar的博客
07-19 572
the-last-naruto是一个基于Vue@2.7和Vite@3的一个项目模板(支持IE11浏览器)，灵感来源自antfu大佬的vitesse-lite。旨在给项目上还需要支持IE11浏览器的一些同学提供近似Vue3生态的开发体验。
swiper2.0使用
luwenze的博客
12-04 871
自动轮播 暂停、开始 swiper2.0可以兼容ie8，ie8轮播图使用swiper2.0更方便 $('#btn1').click(function(){ mySwiper.stopAutoplay(); }) $('#btn2').click(function(){ mySwiper.startAutoplay(); }) 控制左右按钮 上一页下一页 $('#btn1').click(f...
vue2、vue3中使用swiper
weixin_44989721的博客
07-13 6991
不同swiper版本对应不同vue版本
vue2兼容IE浏览器遇见的问题
qq_37990751的博客
09-26 6655
vue2兼容IE浏览器遇见的问题
vue2 里边使用 swiper2
weixin_30788619的博客
04-25 799
找过了很多轮播图插件，我都不会用，还是回到swiper2吧。。。 npm install swiper@2.7.6 --save-dev 封装成一个组件 <template> <div class="lunbo" :class="name" :style="{height: h+'rem'}"> <div class="swiper...
vue使用Swiper
07-11
2. 在 main.js 中引入并使用 vue-awesome-swiper： ``` import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) ``` 3. 在组件中使用 swiper 标签，并通过 options ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值