@mu-ui/mu-infinite-loading NPM

mu-infinite-loading 滚动加载

安装方式

yarn add @mu-ui/mu-infinite-loading

使用指南

import InfiniteLoading from '@mu-ui/mu-infinite-loading'

Vue.component('InfiniteLoading', InfiniteLoading)

<InfiniteLoading class="infinite-loading-container" @load="loadMore">
  <div v-for="n in amount" :key="n">this is No.{{ n }}</div>
  <div slot="complete">全部加载完啦~~</div>
  <div slot="error">系统出小差~~</div>
  <div slot="empty">暂无数据哦~~</div>
  <div slot="loading">拼命加载中~~</div>
</InfiniteLoading>

...
methods: {
  loadMore($state) {
    if (this.amount === 80) {
      $state.complete()
      // $state.error()
      // $state.empty()
      return
    }
    setTimeout(() => {
      this.amount += 20
      $state.loaded()
    }, 1000)
  }
}

mu-infinite-loading Props

参数	说明	类型	默认值
target	默认使用组件时，你需要自己定高度，如果想监听 window 滚动，则 target 指定为 window	String	''
distance	距离目标底部多少距离触发加载	Number	20(px)
debounceTime	去抖时间间隔	Number	50(ms)
preload	是否预加载，即组件挂载后自动触发一次请求	Boolean	true
loadingText	加载提示文案，更灵活可使用 slot(name='loading')	String	'loading...'
completeText	加载提示文案，更灵活可使用 slot(name='complete')	String	'complete~'
errorText	加载提示文案，更灵活可使用 slot(name='error')	String	'error~'
emptyText	加载提示文案，更灵活可使用 slot(name='empty')	String	'empty~'