vue-scroller

Vue component for smooth scrolling, pull to refresh & infinite loading.
271,585 1,773
vue scroll pulltorefresh pull to refresh pull-to-refresh infinite load
Install
npm install vue-scroller
Latest Version:2.2.4
Vue:2
Older releases:1
Last Updated:Feb 17, 2020
Links: GitHub  ·  npm
Maintainer: wangdahoo

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

Related Packages

vue-easy-pull-refresh

Lightweight Vue 3 pull-to-refresh component and composable with touch/mouse gest...

16,765 1
pull-to-refresh pulltorefresh scroll vue composable gesture mobile pull-down pull-refresh refresh +7
easyscroll

this is a tiny scroll bar plugin for vue2.0

871 41
scroll vue
vue-dragscroll

vue directive to make a scrollable element scroll by draging to the scroll direc...

1,541,547 264
scroll vue drag
vue3-smooth-scroll

Simple vue smooth scroll

209,775 34
scroll vue smooth
vue2-smooth-scroll

Simple vue smooth scroll

127,387 121
scroll vue smooth

Version History

Version Released License
2.2.4
2.2.3
2.2.2
2.2.1
2.2.0
Pre-releases (9)
Version Released License
2.2.1-beta.2
2.2.1-beta.1
2.2.0-beta.1
2.2.0-alpha.3
2.2.0-alpha.2