Vue vue-awesome-swiper使用

1.Vue搭建项目需要用到轮播图，就去查了一下Vue的插件vue-awesome-swiper，看似简单实则深藏不露各种问题层数不穷，记录一下方便诸位和自己

安装vue-awesome-swiper依赖，导入文件

npm install swiper vue-awesome-swiper --save

//components单独引入,只有个别地方需要，这里不做全局引入
<div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

这里需要注意，版本和css文件位置的问题，首先我这里安装没有限制版本，默认最新版的，对应的css文件引入路径也是不一样的，github有给出提示

接下来就是一些配置根据官网的配置

可能出现 Cannot read property 'slideTo' of undefined 的错误信息，首先就要去看 slideTo 方法存不存在

swiper() {
   return this.$refs.mySwiper.swiper
}

但是我这个修改以后发现swiper下还是没有slideTo方法，彻底恶心坏了，有兴趣的自己可以打印看一看，我这里就不做处理了，由于项目紧没有做后续处理，直接走swiper的配置，通过配置来实现轮播图的滚动效果，swiper官网给出的配置

看不懂的可以参看这个博主的配置说明，在最下面 https://blog.csdn.net/dwb123456123456/article/details/82701740

<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide v-for="item in banners" :key="item">
        <img style="width:100%;height:200px" :src="item" alt="">
    </swiper-slide>
    <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>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
// 引入轮播图组件
export default {
    components:{
      swiper,
      swiperSlide
    },
    data() {
        return {
          banners: [ 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3721559046,4127241541&fm=26&gp=0.jpg',
           'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2492633268,262337583&fm=26&gp=0.jpg', 
           'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3264192244,2788830312&fm=26&gp=0.jpg' 
          ],
          swiperOption: {
            loop :true,
            autoplay: {
              //这个参数很重要,当外力干扰轮播图时，它能够继续实现自我滚动
              disableOnInteraction: false,
              delay: 1000,//5秒切换一次
            },
            loopAdditionalSlides : 3,
            pagination : {
              el:'.swiper-pagination',
            },
            // 设置点击箭头
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev"
            }
          }
        }
    }
}
</script>