Infinity Scroll 无限滚动

当即将滚动至列表底部时，自动加载更多数据

规则

• 容器组件，内嵌具名插槽infinity-scroll，包裹需要无限加载的内容

可选参数

Prop	type	Required	Default	Description
loadingStatus	String	no	LOADING_STATUS_INITIAL	需要使用InfinityScroll.loadingStatus中定义的常量，用处是指定列表底部加载图标（无/完成/加载中）

枚举值为 LOADING_STATUS_INITIAL(无底部图标),LOADING_STATUS_DONE(展示theEnd图标),LOADING_STATUS_LOADING(展示加载中图标)

事件回调

Event	Description
loadMore()	当即将滚动至列表底部时会触发loadMore事件，在事件的回调函数中可以进行同步或者异步的操作，在全部操作完成后将loadingStatus改为LOADING_STATUS_DONE，表示列表加载完结。

使用方法

<template>
  <vs-infinity-scroll :loading-status="loadingStatus" @load-more="loadMore">
    <template v-slot:infinity-scroll>
      <div class="box" :key="key" v-for="(item, key) in array">{{key}}</div>
    </template>
  </vs-infinity-scroll>
</template>
<script>
  import {ref} from '@vue/composition-api'
  import {InfinityScroll} from 'horizin-ui'

  export default {
    components: {
      'vs-infinity-scroll': InfinityScroll
    },
    setup() {
      const {
        LOADING_STATUS_INITIAL,
        LOADING_STATUS_DONE,
        LOADING_STATUS_LOADING
      } = InfinityScroll.loadingStatus
      const array = ref(10)
      const loadingStatus = ref(LOADING_STATUS_INITIAL)
      const loadMore = () => {
        if (array.value === 50) {
          loadingStatus.value = LOADING_STATUS_DONE    
          return
        }
        loadingStatus.value = LOADING_STATUS_LOADING
        setTimeout(() => {
          loadingStatus.value = LOADING_STATUS_INITIAL
          array.value += 10
        }, 1000)
      }
      return {
        array,
        loadingStatus,
        loadMore
      }
    }
  }
</script>