InfiniteScroll

数据加载 / InfiniteScroll无限滚动组件

说明

当页面滚动到页面底部一定距离时, InfiniteScroll组件会触发onInfinite事件, 通过回调传入的参数infiniteScroll来处理对应的状态.

比如: 当需要异步请求AJAX数据时, 数据请求后, 需要执行infiniteScroll.complete() 来变更InfiniteScroll组件的状态,当继续向下滚动时, 还能继续出发onInfinite事件, 如此往复.

当通过AJAX请求的数据已经全部请求完毕(没有更多的数据时), 则执行infiniteScroll.enable(false), 表明InfiniteScroll任务全部结束. 此时, 将解除对Content组件的onScroll事件的监听.

其他

InfiniteScroll组件会附带InfiniteScrollContent组件, InfiniteScrollContent组件 是默认的显示组件,它只是起到显示状态的作用, 你也可以自己定义显示状态, 只要写好相应的css样式就好.

其中, 标示状态的state有三种值: enabled/disabled/loading, 且这三种状态会写在父组件上, 因此可以用这个特性定义子组件的样式. 比如像下面的demo

建议

首屏的数据至少占满两个以上屏幕高度, 通过 InfiniteScroll 加载的数据也至少能占满两个以上的屏幕高度, 这样的体验效果会好点

注意

  • 组件中的方法是在事件的回调参数中定义的.
  • 组件支持js滚动监听, 如何设置参考Content组件

如何引入

// 引入
import { InfiniteScroll, InfiniteScrollContent } from 'vimo'
// 安装
Vue.component(InfiniteScroll.name, InfiniteScroll)
Vue.component(InfiniteScrollContent.name, InfiniteScrollContent)
// 或者
export default{
  components: {
    InfiniteScroll, InfiniteScrollContent
 }
}
源码:
参考:

传入属性 / Props:

Name Type Attributes Default Description
enabled Boolean <optional>
 true 设置当前组件的可用状态, 如果为false, 则移除当前组件绑定的全部事件处理函数, 隐藏组件并且将状态设置为disabled
threshold String <optional>
 '15%' 激活`onInfinite`事件的阈值. 阈值可以使百分比也可以是具体的px值. 如果为百分比(10%), 则距离底部10%的位置将为激活点; 如果为具体px值(100px), 则页面底部向下100px出为激活点.

对外事件 / Fires:

用法 / Usages

<InfiniteScroll threshold="20%" @onInfinite="onInfinite">
   <InfiniteScrollContent loadingSpinner="ios" loadingText="正在加载..."></InfiniteScrollContent>
   <h5 class="loadedAll" text-center>全部加载完毕</h5>
</InfiniteScroll>

// ....
 .ion-infinite-scroll{
     .loadedAll{
         display: none;
     }
  }
 .ion-infinite-scroll[state=disabled]{
     .loadedAll{
         display: block;
     }
 }

// ....

methods: {
   onInfinite(infiniteScroll){
     let _start = this.i;
     if(_start < 40){
       setTimeout(() => {
         for (; (10 + _start) > this.i; this.i++) {
          this.list.push(`item - ${this.i}`)
        }
        // 当前异步完成
        infiniteScroll.complete();
      }, 100)
    }else{
      // 当前异步结束, 没有新数据了
      infiniteScroll.enable(false);
    }
 }
 // ....

方法 / Methods

(inner) complete()

源码:

在 onInfinite 事件的回调中(参数为当前InfiniteScroll组件的this)执行complete()这个方法, 表示异步操作完毕.
比如在异步情况下通过AJAX获取数据增加新行列, 数据获取完毕更新UI后, 执行complete()这个方法,
表示loading已经完成, InfiniteScroll组件的状态将由loading 转为 enabled.

(inner) enable(shouldEnable)

源码:

设置InfiniteScroll组件的状态. 当在已经没有数据或者不再需要InfiniteScroll组件时执行这个方法.
需要在onInfinite 事件的回调中执行 infiniteScroll.enable(false).

参数 / Parameters:
Name Type Description
shouldEnable boolean

组件当前状态, 如果为false, 则移除scroll的所有监听函数, 并隐藏组件

(inner) waitFor(action)

源码:

传入Promise对象, 在传入的Promise完成数据的加载, 当加载完毕执行resolve(), 这个resolve()
在这里相当于执行了this.complete(), 用法如下所示

示例 / Examples
<Content>
 <List>
     <Item v-for="item of items">{{item}}</Item>
 </List>
 <InfiniteScroll @onInfinite="$event.waitFor(doInfinite())">
     <InfiniteScrollContent></InfiniteScrollContent>
 </InfiniteScroll>
</Content>
// ...
  doInfinite () {
    console.log('Begin async operation');
    return new Promise((resolve) => {
      setTimeout(() => {
        for (var i = 0; i < 30; i++) {
          this.items.push( this.items.length );
        }
        console.log('Async operation has ended');
        resolve();
      }, 500);
    })
}
// ...
参数 / Parameters:
Name Type Description
action Promise

执行方法

事件 / Events

onInfinite

源码:

触发无限滚动

参数 / Parameters:
Name Type Description
infiniteScroll InfiniteScroll

InfiniteScroll组件的实例对象