Package Exports

vue-scroller
vue-scroller/src/components/Scroller.vue

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-scroller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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