vue-infinite-loading2.0 中文文档详解(5)

- type     String
- required   false
- default   'default'

ref

正如你所知，这个属性是一个Vue.js的官方指令，用来获取子组件的实例。我们需要用它来得到<strong> InfiniteLoading </strong>组件的实例来发送事件。你可以用这种方式来得到实例：<strong>this.$refs[the value of ref attribute].</strong>

- type   String
- required   true

direction

如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候，调用on-infinite函数。

<strong>警告：你必须在数据加载后，手动地将滚动父元素的scrollTop设置为正确的值，否则，该组件会一次又一次调用on-infinite函数。</strong>

- type     String
- default   'bottom'

<p id="event">事件</p>

<strong>InfiniteLoading </strong>组件将处理一下事件。如果你需要通过组件的实例来<strong>$emit</strong>,则可以通过<strong>ref</strong>属性来得到组件实例。

$InfiniteLoading:loaded

通常，你需要在数据加载后发送这个事件，<strong> InfiniteLoading</strong>组件将隐藏加载动画，并且准备下一次触发。

$InfiniteLoading:complete

如果<strong>InfiniteLoading</strong>组件就不会接收<strong>$InfiniteLoading:loaded</strong>，当你发送这个事件后，它将为用户显示一个没有结果的提示。如果<strong>InfiniteLoading</strong>组件接收过<strong>$InfiniteLoading:loaded</strong>，当你发送这个事件的时候，它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。

你的<strong>onInfinite</strong>函数可能像这个样子：

onInfinite() {
  this.$http.get(url, (res) => {
  if (res.data) {
   this.list = this.list.concat(res.data);
   this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:loaded');
  } else {
   this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:complete');
  }
 });
}

$InfiniteLoading:reset

<strong>InfiniteLoading</strong>组件将会回到最初的状态，并且<strong>on-infinite</strong>函数将会立刻被调用。大部分情况下，如果你把这个组件同过滤器或制表符一起使用，这个事件还是有用的。

<p id="slots">插槽</p>

你可以利用<strong>slot</strong>自定义提示的内容，当然，如果你喜欢的话，也可以使用默认内容：

 <span slot="{{ slot name }}">
  {{ Your content }}
 </span>