vui-m

InfiniteScroll 上滑无限加载

上滑无限加载，瀑布流滚动加载，用于控制长列表的展示

例子

基本用法

<InfiniteScroll
  v-model="loading"
  :finished="finished"
  @load="loadMore"
  :scroll-distance="10"
>
  <div class="infinite-scroll__swapper">
    <ul class="infinite-scroll__list">
      <li class="infinite-scroll__item" v-for="(item, $index) in list">
        {{item}}
      </li>
    </ul>
  </div>

</InfiniteScroll>

export default {
  data () {
    return {
      list: 5,
      finished: false,
      loading: false,
    }
  },
  mounted () {

  },
  methods: {
    loadMore () {
        setTimeout(() => {
            this.list += 5
            // 异步加载完数据后，设置此值
            this.loading = false
        }, 4500)
        if (this.list > 20) {
            this.finished = true
        }
    },
  },
}

API

参数说明类型可选值默认值
loading异步加载完数据后将loading=false，加载过程中不触发load事件Boolean-false
finished是否已加载完成，加载完成后不再触发load事件Boolean-false
scroll-distance滚动条与底部距离小于 scroll-distance 时触发load事件Number-20
loading-text加载中提示文案String-加载中...
immediate-check是否在初始化时立即执行滚动位置检查，是否符合加载条件Boolean-true

Event

事件名说明参数
load滚动条与底部距离小于 scroll-distance 时触发-

注：

不要把 InfiniteScroll 组件所有子类元素的高度都写固定

←