详解Vue.js使用Swiper.js在iOS


Posted in Javascript onSeptember 10, 2018

前言

swiper这是一个很强大的轮播展示工具,但往往也会有一些未知BUG,尤其是在手机端,由于性能局限,会导致效果和PC测试的时候有完全不一样的效果

在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper

npm i swiper -S

但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误:

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

原因

Swiper.js 这个 npm 包里面还使用了 dom7 ssr-window,所以需要对这两个插件进行 Babel 转 ES5

解决方案

Vue CLI 2.x 下,在 build/webpack.base.config.js 文件中修改

// ...
modules: {
  rules: [
  // ...
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
      resolve('src'), 
      resolve('test'),
      resolve('node_modules/swiper/dist/js/'),
      resolve('node_modules/webpack-dev-server/client'),
      // 新增
      resolve('node_modules/swiper'),
      resolve('node_modules/dom7'),
      resolve('node_modules/ssr-window')
    ]
   },
  // ...
  ]
}
// ...

Vue CLI 3.x 下

在 vue.config.js 中增加 transpileDependencies 配置

module.exports = {
  transpileDependencies: [
    "swiper",
    "dom7",
    "ssr-window"
  ]
}

参考:http://idangero.us/swiper/get-started/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
js 浏览器事件介绍
Mar 30 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
js同源策略详解
May 21 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 #Javascript
在Vue 中使用Typescript的示例代码
Sep 10 #Javascript
ES6使用export和import实现模块化的方法
Sep 10 #Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 #Javascript
浅谈微信小程序flex布局基础
Sep 10 #Javascript
微信小程序文章详情页面实现代码
Sep 10 #Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 #Javascript
You might like
php&amp;java(三)
2006/10/09 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP排序算法类实例
2015/06/17 PHP
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python字典的核心底层原理讲解
2019/01/24 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
真诚的求职信
2014/07/04 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
灵能百分百第三季什么时候来?
2022/03/15 日漫
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS