Detailed explanation of using it on iOS Preface Swiper is a very powerful carousel display tool, but there are often some unknown bugs, especially on the mobile phone. Due to performance limitations, the effect will have co

Preface

Swiper is a very powerful carousel display tool, but there are often some unknown bugs, especially on the mobile phone. Due to performance limitations, the effect will have completely different effects than when testing on PC.

In the H5 project, page turn effect is required, and Swiper is implemented through Swiper.

npm i swiper -S

However, in actual use, the following error will appear in the lower version of iOS < 11:

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

reason

This npm package is also used dom7and ssr-window, so you need to Babel to ES5 for these two plugins

Solution

Under Vue CLI, modify it in the build/ file

// ...
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'),
      // Added      resolve('node_modules/swiper'),
      resolve('node_modules/dom7'),
      resolve('node_modules/ssr-window')
    ]
   },
  // ...
  ]
}
// ...

Vue CLI

Add transpileDependencies configuration in

 = {
  transpileDependencies: [
    "swiper",
    "dom7",
    "ssr-window"
  ]
}

refer to:/swiper/get-started/

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.