Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time
Sep 21, 2017
Sep 21, 2017
Sep 21, 2017
Jan 30, 2017
Dec 20, 2016
Jan 30, 2017
Sep 21, 2017

Vue Scroller version vue

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.


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'
  <!-- content goes here -->

Live Code on JsFiddle

Webpack project by vue-cli


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 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
You can’t perform that action at this time.