VueJS的无限滚动指令 - vue-infinite-scroll

2015-12-11      743      Vue
项目简介

vue-infinite-scroll

vue-infinite-scroll是一个VueJS的无限滚动指令。

安装

npm install vue-infinite-scroll --save

CommonJS

你可以使用任何支持CommonJS的build工具:

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

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

Usage

使用 v-infinite-scroll 实现无线滚动,并使用 infinite-scroll-* 属性来定义它的选项。 

作为 v-infinite-scroll 值指定的方法将会在元素底部到达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);
    }
  }
});

选项

选项 描述
infinite-scroll-disabled 这个属性值为真时无限滚动将会被禁止。
infinite-scroll-distance Number(默认 = 0) - v-infinite-scroll方法执行前元素底部与viewport之间的最小距离。
infinite-scroll-immediate-check Boolean(默认 = true) - 表明指令应该在绑定后立刻检查。如果内容不足以填补滚动容器那么这是很好用的。
infinite-scroll-listen-for-event

当事件在Vu实例发出时无限滚动将会再次检查。