前言

今天是1024，首先祝各位大佬节日快乐！嘻嘻。
最近完成这个项目中使用了vue，只是对vue的初探，但却又意外的体验。哈哈哈哈。下面想与你分享分享。嘻嘻。

vue中使用swiper

之前写过一篇文章是相关react中使用vue中遇到的坑。这个问题在vue中也遇到了，就是表现形式有所不同，但解决方式是一样的。
首先，我使用的是vue-cli 3.0.4搭建的项目。项目中使用swiper:

// 1.安装
npm i swiper -S
// 2.引入
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

1.需求一：在项目中使用swiper默认轮播的左右箭头是在轮播里面的。但设计师要求的是轮播箭头在轮播图的外面，并且箭头需要做修改。如图：

2.需求二：在一个页面中使用多个swiper。

解决方式:

• 在class为swiper-container的div外面在包裹一个class为swiper-father的div，并将它设置为相对定位。
• 将左右箭头的两个div放在calss为swiper-father的div中(如图中的注释)。
• 同一个页面中使用多个swiper，需要给一个class或id已做区分，并且在作为new Swiper的第一个参数。这样做是为了避免滑动一个swiper容器，所有的swiper容器也滑动了。(如图)

注意：上面两张图，都是有取名class为swiper1来区分不同的swiper还有两个左右箭头的div，都给来不同的id以做区分。这样做的目的是为来避免当你点击左箭头或右箭头的时候，会出现所有的swiper容器都进行滚动。同时也要注意new Swiper时是如何绑定相应的class或id以做区分。

进行以上操作后。基本达到想要的效果。打包上线，自己测试也是ok的。但是，当交给qa同学进行测试的时候，问题来了，首先强调一下，这个项目是一个内嵌的H5。在ios10以下的苹果手机上就运行不起来，ios11以上的就可以。android也同样有这样的问题，android4.4.2以下的系统也打不开(ps:当时主要是针对ios解决问题，为确认android4.4.2的手机是否也是同样问题引起的)。然后我进行调试的时候报了一个错(使用的手机是iphone6 ios10的系统)，如图(图中的第二个错，第一个是适配iphone X与这个无关)：

当我看到这个错的时候，并不知道是哪里引起的，当我点进app.js的时候发现是swiper引起的错误，然后进行google大法的时候，发现确实是有人遇到这样的问题，也确认是swiper引起的，但并没有说解决方式=_=,然后，我就进行尽情的尝试。哈哈哈

//把import Swiper from "swiper"改为
import * as Swiper from "swiper/dist/js/swiper.js";

因为之前在react中使用swiper打包的时候也报错了，虽然报错的形式不一样，然后我就想这样尝试，没想到就可以了！就可以了！就可以了！当时觉得amazing。ios10以下与android4.4.2以下的都能跑起来了，哈哈哈哈。

最后想了想，应该是要引入所有打包过后的js，做一个兼容性的处理。应该和react遇到问题的原理是一样的，只是报错的表现形式不一样而已。

意外收获

之前使用react16以上的版本做H5就会在android4.4.2以下的版本跑不起来，完全显示不出页面，会报如下的错(红箭头指向)：

然后我查资料，根据stackoverflow上面解决还是不行，如下代码：

//在入口文件中引入polyfill
import "core-js/es6/map";
import "core-js/es6/set";
import "raf/polyfill";
import "babel-polyfill";

tip：解决问题的相关链接：stackoverflow、react文档官方说明

我就是根据这个来解决的，若那位大佬有好的解决方式，tell me，嘻嘻嘻。
但是这次使用vue2.5.17做的项目，可以在android4.2.2以下的版本跑起来，无需做兼容性的处理，这是使我感到吃惊，但同时也想解决react跑不起来的解决方式。

最后更新于 2018-10-25 07:47:04 并被添加「swiper vue」标签，已有 3488 位童鞋阅读过。

相关文章

• react中使用swiper遇到的坑