【Vue点滴知识|一个好用精简的vuejs轮播插件——vue-swiper 【Vue点滴知识|】

这个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); } } });

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"> Page 1 Page 2 Page 3

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.
==================	================	============================