详解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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 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中输出转义JavaScript代码的实现代码
2011/04/22 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
动态控制Table的js代码
2007/03/07 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
警察思想汇报
2014/01/04 职场文书
小学美术教学反思
2014/02/01 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
本科毕业生自荐信
2014/05/26 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Javascript 解构赋值详情
2021/11/17 Javascript