vue2.0中使用swiper插件 vue-awesome-swiper指南

在使用vue.js開發時，使用官方vue-cli開發時用上了輪播插件swiper,總結了一下swiper使用時遇到的問題：

最好的老師來自於官方文檔：附上vue-awesome-swiper在git上的地址以及安裝過程
https://www.npmjs.com/package/vue-awesome-swiper

下面我來概述一下總體使用操做：
一 首先講下安裝：
經過npm安裝: npm install vue-awesome-swiper --save

二 在vue項目中找到main.js添加：
import 'swiper/dist/css/swiper.css'
//（若是使用的是2.6.0以上的版本須要本身手動去加載css）
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
三 運用到組件中，出問題最多的地方：

<template>
  <div class="scroll">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- 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>
      <!-- Optional controls -->
      <div class="swiper-pagination "  slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-black" 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: 'HelloWorld',
  components: {  
      swiper,  
      swiperSlide  
  },  
  data () {
    return {
       swiperOption: {  
          notNextTick: true,
          //循環
          loop:true,
          //設定初始化時slide的索引
          initialSlide:0,
          //自動播放
          autoplay:true,
          // autoplay: {
          //     delay: 3000,
          //     stopOnLastSlide: false,
          //     disableOnInteraction: true,
          // },
          // 設置輪播
          effect : 'flip',
          //滑動速度
          speed:800,
          //滑動方向
          direction : 'horizontal',
          //小手掌抓取滑動
          // grabCursor : true,
          //滑動以後回調函數
          on: {
              slideChangeTransitionEnd: function(){
                // console.log(this.activeIndex);//切換結束時，告訴我如今是第幾個slide
              },
          },
          //左右點擊
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
          //分頁器設置         
          pagination: {
              el: '.swiper-pagination',
              clickable :true
          }
        },
        swiperSlides: [1, 2, 3, 4]
    }
  },
  computed: {  
    swiper() {  
      return this.$refs.mySwiper.swiper;  
    }  
  }, 
  mounted () {  
    //能夠使用swiper這個對象去使用swiper官網中的那些方法  
     console.log('this is current swiper instance object', this.swiper);
      // this.swiper.slideTo(0, 0, false);
  }   
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.swiper-slide{
  height:200px;
}

</style>

1 分頁器點擊小圓點跳轉到對應頁面不能與設置抓手grabCursor : true同時設置
2 vue-awesome-swiper基於組件的開發設置分頁器和上一頁下一頁按鈕，採起下列方式定義：

//左右點擊
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
          //分頁器設置         
          pagination: {
              el: '.swiper-pagination',
              clickable :true
          }

3 自動輪播autoplay:true與swiper中方法slideTo(0, 0, false)不能同時設置，自動輪播會失效

具體的swiper設置屬性能夠查看中文API文檔：http://www.swiper.com.cn/api