详解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 Chart 插件整理
Jun 18 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 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中call_user_func函数使用注意事项
2014/11/21 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
开办饭店创业计划书
2013/12/28 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
1亿有多大教学反思
2014/05/01 职场文书
年检委托书
2014/08/30 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
老员工辞职信范文
2015/05/12 职场文书
焦裕禄观后感
2015/06/03 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL