Vue.js的滚动器组件

Vue滚动条 (Vue Scroller)

Vue Scroller is a foundational component of Vonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.

Vue Scroller是Vonic UI的基础组件。 为了平滑滚动，请拉动以刷新和无限加载。

View demo 查看演示 Download Source 下载源

For vue 1.0, please refer to branch v1.

对于vue 1.0，请参考分支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'
Vue.use(VueScroller)

<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

Live Code on JsFiddle

JsFiddle上的实时代码

vue-cli的Webpack项目 (Webpack project by vue-cli)

https://github.com/wangdahoo/vue-scroller-demo

https://github.com/wangdahoo/vue-scroller-demo

API (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

属性 名称	描述	需要	默认值
onRefresh	拉刷新刷新	ñ	--
在无限	无限加载回调	ñ	--
在无限	无限加载回调	ñ	--
refreshText	pull-to-refresh提示	ñ	拖动刷新
noDataText	infinite-loading完成时no-more-data提示	ñ	没有更多数据
宽度	滚动条容器宽度	ñ	100%
高度	滚动条容器的高度	ñ	100%
折断	启用捕捉模式	ñ	false
snappingWidth	贴合宽度	ñ	100(代表100px)
高度	捕捉高度	ñ	100
refreshLayerColor	pull-to-refresh层的文字颜色	ñ	#AAA
loadingLayerColor	infinite-loading层的文字颜色	ñ	#AAA
minContentHeight	scroll-content最小内容高度(px)	ñ	0

Scroller vm实例方法： (Scroller vm instance methods:)

• resize() resize scroller content (deprecated, cause the scroller's content resizes self automatically)

  resize()调整滚动条内容的大小( 不建议使用，导致滚动条的内容自动自动调整大小 )

• triggerPullToRefresh() start pull-to-refresh manually

  triggerPullToRefresh()手动开始拉入刷新

• finishPullToRefresh() stop pull-to-refresh

  finishPullToRefresh()停止下拉刷新

• finishInfinite(isNoMoreData :Boolean) stop infinite-loading

  finishInfinite(isNoMoreData :Boolean)停止无限加载

• scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content

  scrollTo(x:Integer, y:Integer, animate:Boolean)滚动到滚动条内容中的某个位置

• scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content

  scrollBy(x:Integer, y:Integer, animate:Boolean)按滚动条内容中的位置滚动

• getPosition :Object get current position of scroller content

  getPosition :Object获取滚动条内容的当前位置

翻译自: https://vuejsexamples.com/scroller-component-for-vue-js/