vue 滚动加载

原创 樱樱桃 随笔 vue.js 500阅读 2017-05-25 11:55:25 举报

https://github.com/ElemeFE/vue-infinite-scroll

vue-infinite-scroll

vue-infinite-scroll is an infinite scroll directive for vue.js.

Install

npm install vue-infinite-scroll --save
CommonJS

You can use any build tool which supports commonjs:

// register globally
var infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)

// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
directives: {infiniteScroll}
})
Or in ES2015:

// register globally
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

// or for a single instance
import infiniteScroll from 'vue-infinite-scroll'
new Vue({
directives: {infiniteScroll}
})
Direct include

You can use the CDN: https://unpkg.com/vue-infinite-scroll, infiniteScroll is exposed to window and will automatically install itself. Also you can use your local copy:

<script src="../node_modules/vue-infinite-scroll/vue-infinite-scroll.js"></script>
Usage

Use v-infinite-scroll to enable the infinite scroll, and use infinite-scroll-* attributes to define its options.

The method appointed as the value of v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport.

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>
var count = 0;

new Vue({
el: '#app',
data: {
data: [],
busy: false
},
methods: {
loadMore: function() {
this.busy = true;

  setTimeout(() => {
    for (var i = 0, j = 10; i < j; i++) {
      this.data.push({ name: count++ });
    }
    this.busy = false;
  }, 1000);
}

}
});

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复