vue案例 - vue-awesome-swiper實現h5滑動翻頁效果

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

 

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

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

 

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

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

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

 

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

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

http://www.javashuo.com/article/p-csfzrmml-bn.html

2、在項目目錄下，往node_modules裏安裝插件vue-awesome-swiper（能夠在項目目錄內，shift+鼠標右鍵，選擇"在此處打開命令窗口"），

 

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

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

npm i --s vue-awesome-swiper

3、第三步咱們依舊沒有天才牌褲子，因此仍是本身一步一步穩穩走。

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/