vue-awesome-swiper滑塊插件使用基礎

前言

目前(2017-07-11)在使用vue-cli創建的webpack版項目中，直接引入官方的swiper文件會致使報錯，因此須要用到vue版本的swiper。

webpack-simple版可直接引入官方swiper文件，參考這裏

新建vue項目

此處使用vue-cli新建項目

vue init webpack demo
//Enter + y 所有選 yes
cd demo
npm i

補安裝sass-loader node-sass

因爲不明緣由，vue的webpack版竟沒有裝sass，須要另外安裝，不須要用sass則可跳過此步。

npm i -D sass-loader node-sass

安裝vue版swiper

npm i -S vue-awesome-swiper

配置使用

可參考 A simple vue-awesome-swiper demo

import vue-awesome-swiper

import { swiper, swiperSlide } from 'vue-awesome-swiper'

插入滑塊組件

與官方swiper相同，額外的控制器依然能夠放到整個滑塊以外。

<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>
 <!-- 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>

設置參數

export default {
 name: 'carrousel',
 data() {
   return {
     swiperOption: {
       // notNextTick是一個組件自有屬性，若是notNextTick設置爲true，組件則不會經過NextTick來實例化swiper，也就意味着你能夠在第一時間獲取到swiper對象，假如你須要剛加載遍使用獲取swiper對象來作什麼事，那麼這個屬性必定要是true
       notNextTick: true,
       // swiper configs 全部的配置同swiper官方api配置
       autoplay: 3000,
       prevButton:'.swiper-button-prev',
       nextButton:'.swiper-button-next',
     }
   }
 },
 components: {
 swiper,
 swiperSlide
},
}
</script>

完整參考

demo.vue

<template>
...
<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>
 <!-- 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>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 name: 'carrousel',
 data() {
   return {
     swiperOption: {
       // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
       // notNextTick是一個組件自有屬性，若是notNextTick設置爲true，組件則不會經過NextTick來實例化swiper，也就意味着你能夠在第一時間獲取到swiper對象，假如你須要剛加載遍使用獲取swiper對象來作什麼事，那麼這個屬性必定要是true
       notNextTick: true,
       // swiper configs 全部的配置同swiper官方api配置
       autoplay: 3000,
       // direction : 'vertical',
       effect:"coverflow",
       grabCursor : true,
       setWrapperSize :true,
       // autoHeight: true,
       // paginationType:"bullets",
       pagination : '.swiper-pagination',
       paginationClickable :true,
       prevButton:'.swiper-button-prev',
       nextButton:'.swiper-button-next',
       // scrollbar:'.swiper-scrollbar',
       //mousewheelControl : true,
       observeParents:true,
       // if you need use plugins in the swiper, you can config in here like this
       // 若是自行設計了插件，那麼插件的一些配置相關參數，也應該出如今這個對象中，以下debugger
       // debugger: true,
       // swiper callbacks
       // swiper的各類回調函數也能夠出如今這個對象中，和swiper官方同樣
       // onTransitionStart(swiper){
       //   console.log(swiper)
       // },
       // more Swiper configs and callbacks...
       // ...
     }
   }
 },
 components: {
 swiper,
 swiperSlide
},
 // you can find current swiper instance object like this, while the notNextTick property value must be true
 // 若是你須要獲得當前的swiper對象來作一些事情，你能夠像下面這樣定義一個方法屬性來獲取當前的swiper對象，同時notNextTick必須爲true
 computed: {
   swiper() {
     return this.$refs.mySwiper.swiper
   }
 },
 mounted() {
   // you can use current swiper instance object to do something(swiper methods)
   // 而後你就可使用當前上下文內的swiper對象去作你想作的事了
   // console.log('this is current swiper instance object', this.swiper)
   // this.swiper.slideTo(3, 1000, false)
    console.log('mounted');
 }
}
</script>

附官方api

swiper官方api

vue版swiper項目地址

github地址