详解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 相关文章推荐
js压缩利器
Feb 20 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
纯JS实现简单的日历
Jun 26 Javascript
搭建vue开发环境
Jul 19 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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系统命令函数使用分析
2013/07/05 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
js实现自定义路由
2017/02/04 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
js模拟百度模糊搜索的实例
2017/08/04 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
js常见遍历操作小结
2019/06/06 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
Python中的类学习笔记
2014/09/23 Python
python中sleep函数用法实例分析
2015/04/29 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python初学者常见错误详解
2019/07/02 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
编写strcpy函数
2014/06/24 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
学校领导干部民主生活会整改方案
2014/09/29 职场文书
通知怎么写?
2019/04/17 职场文书