==================================
注意这个组件没有更新，只支持Vue.js 1.0版本
===================================
这个vue轮播插件只有10k大小，使用十分方便
先放官网的使用方法。
import Vue from 'vue'
import Swiper from 'vue-swiper'
new Vue({
el: 'body',
components: {Swiper},
methods: {
onSlideChangeStart (currentPage) {
console.log('onSlideChangeStart', currentPage);
},
onSlideChangeEnd (currentPage) {
console.log('onSlideChangeEnd', currentPage);
}
}
});
<swiper v-ref:swiper
direction="horizontal"
:mousewheel-control="true"
:performance-mode="false"
:pagination-visible="true"
:pagination-clickable="true"
:loop=“true”
@slide-change-start="onSlideChangeStart"
@slide-change-end="onSlideChangeEnd">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</swiper>
Api
Properties
| Name |
Type |
Default |
Description |
| direction |
String |
"vertical" |
Could be 'horizontal' or 'vertical' (for vertical slider). |
| mousewheel-control |
Boolean |
true |
Set to true to enable navigation through slides using mouse wheel. |
| pagination-visible |
Boolean |
false |
Toggle (hide/true) pagination container visibility when click on Slider's container |
| pagination-clickable |
Boolean |
false |
If true then clicking on pagination button will cause transition to appropriate slide. |
| performace-mode |
Boolean |
false |
Disable advance effect for better performance. |
| loop |
Boolean |
false |
Set to true to enable continuous loop mode |
| ==================== |
========= |
============ |
=================== |
Methods
| Method |
Description |
| next() |
Go next page. |
| prev() |
Go previous page. |
setPage(Number) |
Set current page number. |
Events
| Name |
Parameters |
Description |
| slide-change-start |
pageNumber |
Fire in the beginning of animation to other slide (next or previous). |
| slide-change-end |
pageNumber |
Will be fired after animation to other slide (next or previous). |
| slide-revert-start |
pageNumber |
Fire in the beginning of animation to revert slide (no change). |
| slide-revert-end |
pageNumber |
Will be fired after animation to revert slide (no change). |
| slider-move |
offset |
Callback function, will be executed when user touch and move finger over Swiper and move it. Receives swiper instance and 'touchmove' event as an arguments. |
| ================== |
================ |
============================ |
使用v-ref:swipe 声明后就可以在vue.js中可以使用this.$refs.swipe来调用next();prev();setPage(1);等方法
github地址
