详解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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
javascript 内存模型实例详解
Apr 18 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/10/09 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
对Python 除法负数取商的取整方式详解
2018/12/12 Python
提升Python程序性能的7个习惯
2019/04/14 Python
简单了解django orm中介模型
2019/07/30 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
使用Tkinter制作信息提示框
2020/02/18 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
在校生党员自我评价
2013/09/25 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
文秘应届生求职信
2014/07/05 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
考试没考好检讨书
2015/05/06 职场文书
信息技术国培研修日志
2015/11/13 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript