Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 104 Commits
demo		demo
dist		dist
docs		docs
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.npmrc		.npmrc
README.md		README.md
index.html		index.html
package.json		package.json
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

Repository files navigation

Vue Scroller

Vue Scroller is a foundational component ofVonic 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 */importVuefrom'vue'importVueScrollerfrom'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	-
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