中國有句古話叫：天塌下來有個高的頂着。javascript
在前端圈裏，總有前仆後繼的仁人志士相繼揮灑着熱汗（這裏沒有血），在咱們小白鬚要用到兩個技術結合的時候，他們早已衝向前爲咱們殺出了一條路，準備好了實現用的技術和方案。有時候我就在想，個人理想大概就是站在本身如今仰望的代碼塔的頂峯，像他們同樣，不斷輸出本身的熱情和力量，產出一個能夠爲人所用的東西，以可以爲後來人發光發熱吧。css
vue-awesome-swiper就是其中一個前輩們產出的結晶。就看首尾兩個單詞，就知道他是vue和swiper的愛情之子了。html
先來仰望一波——>九點鐘方向。vue-awesome-swiper官網是中文文檔，媽媽不再用擔憂我讀api啦。「基於 Swiper四、適用於 Vue 的輪播組件」。在產品催着進度的緊張環境下，在四處搜尋解決方案的狀況下，這句話簡直髮着光啊。前端
具體怎麼用，官方文檔寫的很清楚，但我仍是想記錄下來，好再普及一波。vue
1、天才第一步，這裏沒有紙尿褲（(⊙﹏⊙) 好像暴露了年齡...）java
準備一個基於vue-cli的項目(或者你本身的腳手架，whatever),沒有準備的請移駕vue-cli教程：node
http://www.javashuo.com/article/p-csfzrmml-bn.htmlgit
2、在項目目錄下，往node_modules裏安裝插件vue-awesome-swiper（能夠在項目目錄內，shift+鼠標右鍵，選擇"在此處打開命令窗口"），github
註釋：我這裏window電腦安裝了，全部右鍵出現的可能和沒安裝的不同，實在找不到的看這一篇教程：gulp安裝流程、使用方法及CMD經常使用命令導覽vue-cli
而後輸入下邊的安裝插件命令
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官網便可。我這裏只說下我本次使用的配置的含義）
（5）美化- css
wan~
效果：
代碼：
main.js
|
1
2
3
|
import
VueAwesomeSwiper from
'vue-awesome-swiper'
import
'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
|
zujian.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<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>
|
我的學習理解和總結，不少不足還請指正~
聲明：
請尊重博客園原創精神，轉載或使用圖片請註明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/