Vue-scroller NPM

Vue Scroller

Vue Scroller is a foundational component of Vonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.

For vue 1.0, please refer to branch v1.

Demo

https://wangdahoo.github.io/vue-scroller/

How to use

npm i vue-scroller -S

/* ignore this if you include vue-scroller.js by <script> tag from a cdn, such as unpkg */
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

Live Code on JsFiddle

Webpack project by vue-cli

https://github.com/wangdahoo/vue-scroller-demo

API

Scroller component attributes:

Attr. Name	Description	Required	Default Value
onRefresh	pull to refresh callback	N	-
onInfinite	infinite loading callback	N	-
onInfinite	infinite loading callback	N	-
refreshText	tips of `pull-to-refresh`	N	下拉刷新
noDataText	tips of `no-more-data` when `infinite-loading` finished	N	没有更多数据
width	scroller container width	N	`100%`
height	scroller container height	N	`100%`
snapping	enable snapping mode	N	`false`
snappingWidth	snapping width	N	100 (stand for 100px)
snappingHeight	snapping height	N	100
refreshLayerColor	text color of `pull-to-refresh` layer	N	#AAA
loadingLayerColor	text color of `infinite-loading` layer	N	#AAA
minContentHeight	min content height (px) of `scroll-content`	N	0

Scroller vm instance methods:

resize() resize scroller content (deprecated, cause the scroller's content resizes self automatically)
triggerPullToRefresh() start pull-to-refresh manually
finishPullToRefresh() stop pull-to-refresh
finishInfinite(isNoMoreData :Boolean) stop infinite-loading
scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content
scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content
getPosition :Object get current position of scroller content