详解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 相关文章推荐
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 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如何得到当前页和上一页的地址?
2006/11/27 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
心扬JS分页函数代码
2010/09/10 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
Python生成器generator用法示例
2018/08/10 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python中数据库like模糊查询方式
2020/03/02 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
法律专业实习鉴定
2013/12/22 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
主管会计岗位职责
2014/03/13 职场文书
经济国贸专业求职信
2014/06/18 职场文书
人与自然的观后感
2015/06/18 职场文书
婚礼父母致辞
2015/07/28 职场文书
Golang二维数组的使用方式
2021/05/28 Golang