vue-swiper的使用

1.安裝依賴

npm install vue-awesome-swiper --save

2.引入並註冊

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
//也能夠用require
//var Vue = require('vue')
//var VueAwesomeSwiper = require('vue-awesome-swiper')

Vue.use(VueAwesomeSwiper)

3.組件中的使用

<template>
  <div class="swiper1">
    <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>
  </div>
</template>

<script>
require('../assets/swiper-3.4.2.min.css')

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

export default {
  name:"swiper1",
  components: {
    swiper,
    swiperSlide
  },
  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: 1000,
          // 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>

<style scoped>

</style>

注意:須要手動引入swiper的css樣式,能夠去swiper的官網進行下載