vue-swiper如何使用

小編給大家分享一下vue-swiper如何使用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

swiper是我之前做前端頁面會用到的一個插件,我自己認為是非常好用的。swiper提供了形式多種多樣、適應各個終端的輪播圖效果。

我們先下載包，然后去main.js里面配置。

npm install vue-awesome-swiper --save

　　我們可以用import的方法

// import 
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

　　也可以用require

var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')

　　兩者都可以達到目的，然后再mian.js里面全局注冊

Vue.use(VueAwesomeSwiper)

　　在模板里使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 components: {
  swiper,
  swiperSlide
 }
} 

<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>
  <swiper-slide>I'm Slide 4</swiper-slide>
  <swiper-slide>I'm Slide 5</swiper-slide>
  <swiper-slide>I'm Slide 6</swiper-slide>
  <swiper-slide>I'm Slide 7</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>
 // swiper options example:
 export default {
  name: 'carrousel',
  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配置
     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
     debugger: true,
    }
   }
  },
 }
</script>

　　這樣就可以使用啦

<-----------------------補充時間2017/9/22 21:00------------------------>

平時沒怎么用這個插件，今天看了下，發現有點小小的改動，可能導致之前的受到影響，npm包發布者的原話是

// starting with version 2.6.0, you need to manually introduce swiper's css這句話的意思是：從版本2.6.0開始，您需要手動引入swiper的css

require('swiper/dist/css/swiper.css')

以上是“vue-swiper如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！