在vue中使用swiper插件以及我遇到的坑

如何在vue中使用swiper

参考官方文档：https://github.com/surmon-china/vue-awesome-swiper

第一步 npm下载swiper

npm install vue-awesome-swiper --save

第二步：在全局引入swiper插件（main.js）

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

第三步参考文档，将swiper插件封装成一个组件

<!-- The ref attr used to find the swiper instance -->
<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

第四步：在需要的地方引入swiper即可

《1》先导入swiper

import Swiper from ‘@/components/swiper.vue’

《2》注册组件

components:{
Swiper
}

《3》使用组件

< Swiper/>

第五步：根据官方文档在swiperOption选项中添加你需要的动态效果

重点来了-----我遇到的坑

1，当我做完上面的操作之后，我发现在控制台报了一个小小的错：Maximum call stack size exceeded。

原因：因为自己定义的Swiper.vue 里的name和 插件里的swiper重复了 修改后 name: ‘HomeSwiper’, 换个名字就好了

将上面的name：‘swiper’换一下名字就好了，注意：无论是大写还是小写的swiper都会有影响，只有换名字才可以

那么name的作用是啥呢？请看下面。。当当当当当~

当我解决完上面的问题之后，我又遇到了第二个坑：当我滑动轮播图的时候，又出现了一片红。。emmmm，

报错内容：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

解决方案：

1，在需要滑动的标签上加上一句css样式：

touch-action:none

但是对我来说好像没什么用。。果断方案二：在node_module中找到swiper.js文件，大概在第2806行，屏蔽 // e.preventDefault();，不再报错了

等等，还有第三个bug。。就是设置自动轮播后没有并没有实现自动轮播

原因：1，官方给的配置：autoplay：3000，并不能自动轮播，要改为true
2，如果还是不行。。就比如我，试了上面的方案之后还是不行，在上面添加一个属性：disableOnInteraction，其实加这个属性主要是为了解决用户操作后swiper之后不能再自动轮播的问题

disableOnInteraction属性：

用户操作swiper之后，是否禁止autoplay。默认为**true**：停止。
如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
操作包括触碰，拖动，点击pagination等。
			就问你坑不坑

当然，我还看到一种错误的可能性，就是swiper初始化的问题，主要体现：需要刷新一下才能自动轮播，加下面这两句话就可以了