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.
https://wangdahoo.github.io/vue-scroller/
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>
https://github.com/wangdahoo/vue-scroller-demo
Attr. Name | Description | Required | Default Value |
---|---|---|---|
onRefresh | pull to refresh 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 |
resize()
resize scroller content (deprecated, cause the scroller's content resizes self automatically)triggerPullToRefresh()
start pull-to-refresh manuallyfinishPullToRefresh()
stop pull-to-refreshfinishInfinite(isNoMoreData :Boolean)
stop infinite-loadingscrollTo(x:Integer, y:Integer, animate:Boolean)
scroll to a position in scroller contentscrollBy(x:Integer, y:Integer, animate:Boolean)
scroll by a position in scroller contentgetPosition :Object
get current position of scroller content