您的位置：首页 > 产品设计 > UI/UE

一个好用精简的vuejs轮播插件——vue-swiper

2017-02-12 09:14 821 查看

这个vue轮播插件只有10k大小，使用十分方便

先放官网的使用方法。
http://www.jianshu.com/p/e11505466851

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地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航