vue轮播插件swiper移动端vue-awesome-swiper

vue轮播插件swiper移动端vue-awesome-swiper

关于vue-awesome-swiper报错或者没有用的问题，以下为正确顺序：

• 安装

注意：安装3.1.3版本，最新的有问题

// 安装 swiper vue-awesome-swiper
npm install swiper vue-awesome-swiper@3.1.3 --save
// or
yarn add swiper vue-awesome-swiper@3.1.3

• 引入

/*全局引入 建议全局，组件方式最新版以及某些版本有问题*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    Vue.use(VueAwesomeSwiper)
    
/*组件方式引用*/
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    export default {
    components: {
      swiper,
      swiperSlide
    }

• 使用

template

    <swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <div class="swiper-scrollbar"></div> //滚动条
      <div class="swiper-button-next"></div> //下一项
      <div class="swiper-button-prev"></div> //上一项
      <div class="swiper-pagination"></div> //标页码
    </swiper>

 data(){
    return{
      swiperOption: {//swiper3
      autoplay: 3000,
      speed: 1000,
      on: {
          slideChangeTransitionEnd: () => { // 切换事件
            let swiper = this.$refs.mySwiper.swiper
            let i = swiper.activeIndex // swiper.activeIndex，下标从0开始
          }
        },
        navigation: {
          // 下一张
          nextEl: '.btn-right', // 下一张标签类名可以自定义
          // 上一张
          prevEl: '.btn-left'// 上一张标签类名可以自定义
        }
      }
    }
  }