vue-awesome-swiper

1.下載插件

    npm install vue-awesome-swiper  --save

2.應用main.js

   import VAS from 'vue-awesome-swiper'

   import 'vue-awesome-swiper.min.css'

3.遇到的坑

   ! css和代碼分離，要引入 ‘vue-awesome-swiper.min.css’

   ! 配置時 autoplay:3000打死出不來，改爲了autoplay:true

   ！分頁器和前進後退按鈕無效

4.具體代碼

<template>
      <div id="home">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide><img src="../assets/image/ban1.jpg" alt="" ></swiper-slide>
          <swiper-slide><img src="../assets/image/ban2.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban3.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban4.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban6.jpg" alt=""></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>
      </div>
</template>

//新版本配置
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'Home',
    data(){
      return {
        swiperOption: {//配置輪播，能夠去swiper官網看api，連接http://www.swiper.com.cn/api/
          notNextTick: true, // notNextTick是一個組件自有屬性，若是notNextTick設置爲true，組件則不會經過NextTick來實例化swiper，也就意味着你能夠在第一時間獲取到swiper對象，假如你須要剛加載遍使用獲取swiper對象來作什麼事，那麼這個屬性必定要是true
          autoplay: true,
          //autoplay:{disableOnInteraction},//用戶操做後繼續動畫
          loop: true,
          direction: 'horizontal', //水平滑動  ‘vertival’ 垂直方向
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          pagination: {
            el: '.swiper-pagination'
          },
          centeredSlides: true,
          paginationClickable: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          keyboard: true,
          mousewheelControl: true,
          observeParents: true, // 若是自行設計了插件，那麼插件的一些配置相關參數，也應該出如今這個對象中，以下debugger
          debugger: true
        }
      }
    },
    components:{
      swiper,
      swiperSlide
    },
    computed:{
      swiper(){ //實例化swiper
        return this.$refs.mySwiper.swiper
      }
    }
  }
</script>

//低版本配置
<script>

data() {

    return {

     swiperOption:

      notNextTick: true ,

      // swiper configs 全部的配置同swiper官方api配置

      autoplay: 3000,

      direction: 'vertical' ,

      grabCursor: true ,

      setWrapperSize: true ,

      autoHeight: true ,

      pagination: '.swiper-pagination' ,

      paginationClickable: true ,

      prevButton: '.swiper-button-prev' , //上一張

      nextButton: '.swiper-button-next' , //下一張

      scrollbar: '.swiper-scrollbar' , //滾動條

      mousewheelControl: true ,

      observeParents: true ,

      debugger: true ,

     }

    }

   },

<script>

　

<template>
      <div id="home">
        <swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide><img src="../assets/image/ban1.jpg" alt="" ></swiper-slide>
          <swiper-slide><img src="../assets/image/ban2.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban3.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban4.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/image/ban6.jpg" alt=""></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>
      </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    name: 'Home',
data(){
      return {
        swiperOption: {//如下配置不懂的，能夠去swiper官網看api，連接http://www.swiper.com.cn/api/
          // notNextTick是一個組件自有屬性，若是notNextTick設置爲true，組件則不會經過NextTick來實例化swiper，也就意味着你能夠在第一時間獲取到swiper對象，<br>　　　　　　　　假如你須要剛加載遍使用獲取swiper對象來作什麼事，那麼這個屬性必定要是true
//          notNextTick: true,
//          // swiper configs 全部的配置同swiper官方api配置
//          speed: 400,
//          autoplay: true,
//          loop:true,
//          direction: 'horizontal',
//          grabCursor: true,
//          setWrapperSize: true,
//          autoHeight: true,
//          pagination : '.swiper-pagination',
//          paginationClickable: true,
//          prevButton: '.swiper-button-prev',//上一張
//          nextButton: '.swiper-button-next',//下一張
//          scrollbar: '.swiper-scrollbar',//滾動條
//          mousewheelControl: true,
//          observeParents: true,
//          // 若是自行設計了插件，那麼插件的一些配置相關參數，也應該出如今這個對象中，以下debugger
//          debugger: true,
notNextTick: true, // notNextTick是一個組件自有屬性，若是notNextTick設置爲true，組件則不會經過NextTick來實例化swiper，也就意味着你能夠在第一時間獲取到swiper對象，假如你須要剛加載遍使用獲取swiper對象來作什麼事，那麼這個屬性必定要是true
autoplay: true,
loop: true,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: {
   el: '.swiper-pagination'
},
centeredSlides: true,
paginationClickable: true,
navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev'
},
keyboard: true,
mousewheelControl: true,
observeParents: true, // 若是自行設計了插件，那麼插件的一些配置相關參數，也應該出如今這個對象中，以下debugger
debugger: true
}
}
},
components:{
    swiper,
    swiperSlide
},
computed:{
    swiper(){
        return this.$refs.mySwiper.swiper
    }
}
}
</script>

<!--<style> @import '../swiper.min.css'; </style>-->