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的基础组件。 为了平滑滚动，请拉动以刷新和无限加载。

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:)

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/