JavaScript Vue HTML
Clone or download
Permalink
Failed to load latest commit information.
demo add Master-Detail example Sep 21, 2017
dist v2.2.4 Sep 21, 2017
docs v2.2.4 Sep 21, 2017
src v2.2.4 Sep 21, 2017
.babelrc init 2.1 Jan 30, 2017
.gitignore v0.4.0 Dec 20, 2016
.npmrc update dependencies Apr 22, 2017
README.md v2.2.1 Jun 26, 2017
index.html init 2.1 Jan 30, 2017
package.json v2.2.4 Sep 21, 2017
webpack.config.js export as a Vue Plugin Mar 23, 2017
yarn.lock update dependencies Apr 22, 2017

README.md

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.

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