swiper 在Vue中遇到的问题（走马灯效果）_babel会降级swiper吗-CSDN博客

本文链接：https://blog.csdn.net/qq_40204835/article/details/85268575

走马灯（效果）

需求分析

1. 当产品给我们提供一个这样的效果图时，我们就要想到如何去实现

在这里插入图片描述

2. 这里我想到了使用Swiper

在这里插入图片描述

3. 对于一个前端开发来说插件就是为了快速开发业务、功能，插件（原生js的封装解决部分兼容性问题）

在网上看了基于Vue开发的轮播插件  vue-awesome-swiper 坑也比较多之前踩过 
大部分都是基于swiper的二次封装

4. vue中使用 npm i swiper -S （swiper比较符合此次功能）

5. 案例代码

<template>
  <!-- 轮播 swiper-no-swiping 禁止页面轮播滑动 只能通过事件滑动 swiper-no-swiping-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
          <div class="shadow">
					  <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=399118516,1470088676&fm=27&gp=0.jpg" alt="1" title="one">
          </div>
				</div>
				<div class="swiper-slide">
          <div class="shadow">
					  <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3337909622,452079418&fm=27&gp=0.jpg" alt="2" title="two">
          </div>
				</div>
				<div class="swiper-slide">
          <div class="shadow">
					  <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=639238630,2179659181&fm=27&gp=0.jpg" alt="3" title="three">
          </div>
				</div>
			</div>
		</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  data() {
    return {
      thisSwiper: null,
      isSwiperNum: ''
    };
  },
  mounted() {
    this.thisSwiper = new Swiper('.swiper-container', {
      loop: true,
      effect: 'coverflow', // coverflow
      centeredSlides: true, // 居中
      initialSlide: 1,
      slidesPerView: 2, // 可见数 auto
      coverflow: {
        rotate: 0,
        stretch: 35,
        depth: 160,
        modifier: 1,
        slideShadows: false
      },
      onTransitionEnd: function(swiper) {
        // 记录当前图片选中的索引 其他方法可根据Swiper API 查找
        this.isSwiperNum = swiper.activeIndex;
        console.log('isSwiperNum', this.isSwiperNum);
      }
    })
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.swiper-slide div {
  display: block;
  width: 100%;
}

.swiper-slide div img {
  display: block;
  width: 100px;
  height: 120px;
  margin: 0 auto;
}

.swiper-slide-active div img {
  width: 130px;
  height: 140px;
  margin-top: 80px;
}
</style>

6. 接下来带你们一步一步入坑

兼容性在移动端是一个头疼的问题（Android、IOS） 
本人是一个H5开发  在公司做混合App和Android、IOS交互也比较频繁 接下来入坑

1> 在Android、IOS中调试目前我使用的Vconsole简单的控制台 方便调试报错信息
2> usb连接调试(android)  IOS也可使用usb调试等 调试工具很多  安卓控件的升级导致
    alert() 不能弹出 调试使用alert请注意

下面分析报错问题：

*ios<11 版本出现以下报错：
  SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

  解决办法：swiper中js在vue 压缩代码的时候: webpack构建时没把es6中const等转换 导致在ios<11的版本支持
		  1. 把swiper中const  全局替换为var  比较麻烦、问题多
		  2. 使用babel 把swiper转换为es5语法，在网上查找资料，有人已经踩过坑了
		  	  附上原文链接：[ios10及swiper](https://blog.csdn.net/runonway/article/details/79278765)

// 在项目根目录下新建一个文件vue.config.js，在里面添加如下语句：
module.exports = {
  chainWebpack: config => {
    config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
  }
}

7. IOS10 系统的用户比较多（出现问题）

 通过Vconsole 查看到10系统：SyntaxError: Cannot declare a let variable twice: ‘e’.
解决方案已经有人使用过了 这里我就借鉴一下！！！

// 进入build文件夹
// 找到webpack.prod.conf.js文件
// 在UglifyJsPlugin的定义里添加关于mangle的选项，如下:
new UglifyJsPlugin({
   uglifyOptions: {
     compress: {
       warnings: false
     },
     mangle: {
       safari10: true
     }
   },
   sourceMap: config.build.productionSourceMap,
   parallel: true
 }),