InfiniteScroll 无限滚动

用于滚动分页加载列表数据，内置加载中、没有更多、空状态和返回顶部能力。

示例

基础用法

属性示例

<template>
  <mt-infinite-scroll
    v-model="list"
    height="500px"
    :up-scroll-page-size="20"
    :up-scroll-distance="80"
    :query-min-delay="300"
    :show-backtop="true"
    @query="handleQuery"
  >
    <div
      v-for="item in list"
      :key="item.id"
    >
      {{ item.id }}
    </div>
  </mt-infinite-scroll>
</template>

query 触发后需要根据请求结果调用组件实例暴露的 endSuccess(data, totalSize) 或 endError()，组件会据此更新加载、失败、空状态和没有更多状态。

API

Props

属性名	说明	类型	默认值
model-value	最终渲染列表数据	unknown[]	[]
height	滚动区域高度	number | string	'100%'
up-scroll-page-num	默认页码	number	1
up-scroll-page-size	每页数量	number	10
up-scroll-enabled	是否开启加载更多	boolean	true
up-scroll-immediate	是否立即检查并加载	boolean	true
scroll-event-delay	滚动节流时延，单位 ms	number	30
up-scroll-distance	触发上拉加载的阈值	number	75
hide-no-more-by-limit	数据量小于等于该值时隐藏没有更多	number	5
loading-more-loading-text	加载中文案	string	''
loading-more-no-more-text	没有更多文案	string	''
empty-text	空状态描述	string	''
empty-img	空状态图片	string	''
empty-image-width	空状态图片宽度	number | string	200
query-min-delay	请求最短展示时间，单位 ms	number	0
show-backtop	是否显示返回顶部按钮	boolean	false

Events

事件名	说明	回调参数
update:model-value	列表数据更新时触发	(list: unknown[])
query	需要加载数据时触发	(page: { pageNum: number, pageSize: number })

Slots

插槽名	说明	作用域参数
default	列表内容	-
empty	自定义空状态内容	-

Exposes

名称	说明	类型
endSuccess	标记加载成功并写入数据	(data: ListItem[], totalSize: number) => Promise<void>
endError	标记加载失败	() => void
resetUpScroll	重置分页并重新检查加载	() => Promise<void>

注意事项

• 监听 query 后必须通过 endSuccess 或 endError 结束加载状态。
• endSuccess 的 totalSize 用于判断是否还有下一页。
• 开启 show-backtop 后，返回顶部按钮会绑定到组件的滚动容器。