An infinite and pull scroller component for Vue.js

An infinite and pull scroller component for Vue.js

vue-pull-infinite-scroller is a native scrolling component that performs well in a webview, pull to refresh & infinite loading.

vue-pull-infinite-scroller version vue

vue-pull-infinite-scroller is a native scrolling component that performs well in a webview, pull to refresh & infinite loading.

Demo

http://joubn.com/vue-pull-infinite-scroller/dist/example/index.html

How to use

npm i vue-pull-infinite-scroller -S
import Vue from 'vue'
import VuePullInfiniteScroller from 'vue-pull-infinite-scroller'
Vue.use(VuePullInfiniteScroller)
<pull-infinite-scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</pull-infinite-scroller>
methods: {
    refresh: function (done) {
        // ajax
        done();
    },
    infinite: function (done) {
    // ajax
        
        // success
            // go on
            done()
            // end
            done('end')
        
        // error
        done('error')
    }
}

重要

组件一定要设置固定高度

组件内包含另一种块滑动区域(如:amap)可以写在class为no_scroll容器里

API

scroller component attributes:

Attr. Name Description Required Default Value
onRefresh pull to refresh callback N -
onInfinite infinite loading callback N -

scroller vm instance methods:

  • reload() reload scroller

Github Repository