說到h5的翻頁，很定第一時間想到的是swiper。但是我當時想到的卻是，vue裏邊怎麽用swiper？！

中國有句古話叫：天塌下來有個高的頂著。

在前端圈裏，總有前仆後繼的仁人誌士相繼揮灑著熱汗（這裏沒有血），在我們小白需要用到兩個技術結合的時候，他們早已沖向前為我們殺出了一條路，準備好了實現用的技術和方案。有時候我就在想，我的理想大概就是站在自己現在仰望的代碼塔的頂峰，像他們一樣，不斷輸出自己的熱情和力量，產出一個可以為人所用的東西，以能夠為後來人發光發熱吧。

vue-awesome-swiper就是其中一個前輩們產出的結晶。就看首尾兩個單詞，就知道他是vue和swiper的愛情之子了。

先來仰望一波——>九點鐘方向。vue-awesome-swiper官網是中文文檔，媽媽再也不用擔心我讀api啦。“基於 Swiper4、適用於 Vue 的輪播組件”。在產品催著進度的緊張環境下，在四處搜尋解決方案的情況下，這句話簡直發著光啊。

具體怎麽用，官方文檔寫的很清楚，但我還是想記錄下來，好再普及一波。

一、天才第一步，這裏沒有紙尿褲（(⊙﹏⊙) 好像暴露了年齡...）

準備一個基於vue-cli的項目(或者你自己的腳手架，whatever),沒有準備的請移駕vue-cli教程：

https://www.cnblogs.com/padding1015/p/9092998.html

二、在項目目錄下，往node_modules裏安裝插件vue-awesome-swiper

註釋：我這裏window電腦安裝了，所有右鍵出現的可能和沒安裝的不一樣，實在找不到的看這一篇教程：gulp安裝流程、使用方法及CMD常用命令導覽

然後輸入下邊的安裝插件命令

npm i --s vue-awesome-swiper

三、第三步我們依舊沒有天才牌褲子，所以還是自己一步一步穩穩走。

1．插件安裝後就是引用插件了，main.js內部分三步走：

(1) 引用插件：mainjs註冊vas

(2) 註冊插件

註冊後未use控制臺就警告了

通過全局方法 Vue.use() 使用插件後可以了

使用後控制臺無錯了

(3) 插件樣式（也可以自己寫，不用人家的）

2．vue項目中使用：

(1) 準備-template

new a project準備一個空項目

初始化html-空結構

(2) 引入-import

(3) 註冊組件-components

(4) 配置-js（具體配置和swiper的一摸一樣，看swiper官網即可。我這裏只說下我本次使用的配置的含義）

swiper官網參數

（5）美化- css

wan~

效果：

代碼：

main.js

import VueAwesomeSwiper from ‘vue-awesome-swiper‘
import ‘swiper/dist/css/swiper.css‘
Vue.use(VueAwesomeSwiper)

zujian.vue

<template>
  <div class="hello-world">
    <!-- <h3>https://github.com/surmon-china/vue-awesome-swiper</h3> -->
    <!-- <h3>http://www.swiper.com.cn/api/index2.html</h3> -->
    <!-- http://www.swiper.com.cn/api/parameters/21.html -->
    <transition name="fade">
      <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
          <!-- 第一頁 -->
          <swiper-slide class="swiper-slide1">
            <div class="page">
              <h3>第一頁</h3>
            </div>
          </swiper-slide>
          <!-- 第二頁 -->
          <swiper-slide class="swiper-slide2">
            <div class="page">
              <h3>第二頁</h3>
            </div>
          </swiper-slide>
          <!-- 第三頁 -->
          <swiper-slide class="swiper-slide3">
            <div class="page">
              <h3>第三頁</h3>
            </div>
          </swiper-slide>
      </swiper>
    </transition>
  </div>
</template>

<script>
import { swiper, swiperSlide } from ‘vue-awesome-swiper‘
export default {
  name: ‘HelloWorld‘,
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        // swiper configs 所有的配置同swiper官方api配置
        
        notNextTick: true,//notNextTick是一個組件自有屬性，如果notNextTick設置為true，組件則不會通過NextTick來實例化swiper，也就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什麽事，那麽這個屬性一定要是true
        direction: ‘vertical‘,//水平方向移動
        grabCursor: true,//鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
        setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，開啟這個設定會在Wrapper上添加等於slides相加的寬或高，在對flexbox布局的支持不是很好的瀏覽器中可能需要用到。
        autoHeight: true,//自動高度。設置為true時，wrapper和container會隨著當前slide的高度而發生變化
        slidesPerView: 1,//設置slider容器能夠同時顯示的slides數量(carousel模式)。可以設置為數字（可為小數，小數不可loop），或者 ‘auto‘則自動根據slides的寬度來設定數量。loop模式下如果設置為‘auto‘還需要設置另外一個參數loopedSlides。
        mousewheel: false,//開啟鼠標滾輪控制Swiper切換。可設置鼠標選項，默認值false
        mousewheelControl: false,//同上
        height: window.innerHeight, // 高度設置，占滿設備高度
        resistanceRatio: 0,//抵抗率。邊緣抵抗力的大小比例。值越小抵抗越大越難將slide拖離邊緣，0時完全無法拖離。本業務需要
        observeParents: true,//將observe應用於Swiper的父元素。當Swiper的父元素變化時，例如window.resize，Swiper更新

        // 如果自行設計了插件，那麽插件的一些配置相關參數，也應該出現在這個對象中，如下debugger
        debugger: true,

        // swiper的各種回調函數也可以出現在這個對象中，和swiper官方一樣
        onTransitionStart(swiper){
          console.log(swiper)
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    // current swiper instance
    // 然後你就可以使用當前上下文內的swiper對象去做你想做的事了
    console.log(‘this is current swiper instance object‘, this.swiper)
    this.swiper.slideTo(3, 1000, false)
  }
}
</script>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to{
    opacity: 0
  }
  .swiper-wrapper{
    height: 100px;
  }
  .swiper-slide1{
    background: skyblue;
  }
  .swiper-slide2{
    background: yellowgreen;
  }
  .swiper-slide3{
    background: blanchedalmond;
  }
</style>

2018-07-11 12:59:47　

個人學習理解和總結，很多不足還請指正~

聲明：

　　請尊重博客園原創精神，轉載或使用圖片請註明：

　　博主：xing.org1^

　　出處：http://www.cnblogs.com/padding1015/

vue-awesome-swiper - 基於vue實現h5滑動翻頁效果