详解Vue.js使用Swiper.js在iOS<11时出现错误

2024-10-30 20:18:13

前言

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/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue 过渡实现轮播图效果

Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡下面例子中我们用到列表过渡,可以先学习一下官方的例子要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i
使用Vue制作图片轮播组件思路详解

之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也很多,在这里也给大家分享出来,如有疏漏,欢迎指正! 在制作这个组件之前,笔者google了不少关于轮播的文章,发现实现一个轮播的思路虽然各有不同,但是大的逻辑其实差不多,本文主要依据慕课网上焦点轮播图特效这节课,不过慕课网主要用原生JS写,而笔者则用Vue进行了重构,并且进行了一点修改.完成后的组件
移动端触屏幻灯片图片切换插件idangerous swiper.js

强大的移动端触屏幻灯片图片和HTML内容切换插件idangerous swiper,支持自定义左右切换还是上下切换,支持多个分组切换,支持下拉更新切换,支持TAB方式切换等十几种切换效果,支持众多的选项配置,如: speed:切换的速度(毫秒) autoplay:自动播放的速度 mode:切换模式 horizontal(横向) vertical(竖向) loop:是否循环播放true false 如此强大的配置功能,值得使用. 使用方法: 1.加载插件 <link rel="stylesh
基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
基于vue.js实现图片轮播效果

轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$
微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml  <swiper class="swiper" indicator-dots="t
Swiper.js实现移动端元素左右滑动

swiper.js也是一个很好用的移动端的js库. 需要引入它的css文件和js文件.用法很简单,加入相应的类即可,看一下Demo,很容易看懂. 我的例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport
vue使用swiper.js重叠轮播组建样式

本文实例为大家分享了vue使用swiper.js重叠轮播组建样式,供大家参考,具体内容如下 <template> <div class="article-main"> <div class="article-content"> <swiper class="swiper" :options="swiperOption"> <swiper-slide class="
vue.js实现简单轮播图效果

学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&
swiper.js插件实现pc端文本上下滑动功能示例

本文实例讲述了swiper.js插件实现pc端文本上下滑动功能.分享给大家供大家参考,具体如下: 在网站上看小说,文本太长时,靠鼠标去拖动滚动条太麻烦,鼠标滚轮又不精确,滚一下就不知道跑到哪去了.能不能像移动端那样可以鼠标上下滑动呢?swiper可以完美解决这个问题. 1.首先当然是引入swiper文件了: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/c

详解Vue.js使用Swiper.js在iOS<11时出现错误

相关推荐

随机推荐