InfiniteLoading 无限加载

滚动到底部时自动加载更多数据，松手后自动加载新内容

是否还有更多数据

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-infinite-loading ref="infiniteRef" class="demo-infinite" :hasMore="hasMore" :threshold="50" loadingText="正在加载更多..." loadMoreText="点击或滚动到底部加载更多" noMoreText="没有更多" @load-more="onLoadMore" > <view v-for="(item, index) in list" :key="index" class="demo-infinite-item"> <view class="demo-infinite-item-num"> <text class="demo-infinite-item-num-text">{{ index + 1 }}</text> </view> <view class="demo-infinite-item-info"> <text class="demo-infinite-item-title">列表项 {{ item.title }}</text> <text class="demo-infinite-item-desc">{{ item.desc }}</text> </view> </view> </re-infinite-loading>

<!-- 操作 -->
  <re-button theme="primary" @click="reset">重置列表</re-button>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-infinite-loading />。

API

InfiniteLoading Props

名称类型默认值描述必传
hasMorebooleantrue @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}是否还有更多数据 @default true @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
loadingTextstring加载中... @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}加载中提示文案 @default 加载中... @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
loadMoreTextstring加载更多 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}加载更多提示文案 @default 加载更多 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
noMoreTextstring没有更多了 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}没有更多提示文案 @default 没有更多了 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
thresholdnumber50 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}触发加载的距离阈值(px) @default 50 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
customStylestring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}自定义样式 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y

InfiniteLoading Events

名称参数描述
load-more--
update:hasMorevalue: boolean-

InfiniteLoading Slots

名称描述
default默认插槽
loading-
Indicator 指示器
指示器组件，用于展示当前页码位置，支持圆点和数字两种类型
List 虚拟列表
虚拟列表组件，用于大数据量列表的高性能渲染