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>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 | - |
| 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 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 :Objectget current position of scroller content
