List 虚拟列表

虚拟列表组件，用于大数据量列表的高性能渲染

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-list class="demo-list-default" :data="basicData" :itemHeight="50" height="300px"> <template #default="{ item, index }"> <text class="demo-list-item-text">{{ item['name'] }}</text> </template> </re-list>

<!-- 自定义单项高度 -->
  <re-list class="demo-list-item-height" :data="basicData" :itemHeight="80" height="300px"> <template #default="{ item, index }"> <text class="demo-list-item-text">{{ item['name'] }} - {{ item['age'] }}岁</text> </template> </re-list>

<!-- 自定义容器高度 -->
  <re-list class="demo-list-height" :data="basicData" :itemHeight="50" height="200px"> <template #default="{ item, index }"> <text class="demo-list-item-text">{{ item['name'] }}</text> </template> </re-list>

<!-- 缓冲数量 -->
  <re-list class="demo-list-buffer" :data="basicData" :itemHeight="50" height="300px" :bufferCount="10"> <template #default="{ item, index }"> <text class="demo-list-item-text">{{ item['name'] }}</text> </template> </re-list>

<!-- 自定义keyField -->
  <re-list class="demo-list-keyfield" :data="customKeyData" :itemHeight="50" height="300px" keyField="uid"> <template #default="{ item, index }"> <text class="demo-list-item-text">{{ item['name'] }}</text> </template> </re-list>

<!-- 自定义样式 -->
  <re-list class="demo-list-custom-style" :data="basicData" :itemHeight="50" height="300px" customStyle="border: 1px solid #e7e7e7;"> <template #default="{ item, index }"> <text class="demo-list-item-text">{{ item['name'] }}</text> </template> </re-list>

<!-- 空数据 -->
  <re-list class="demo-list-empty" :data="emptyData" :itemHeight="50" height="200px"> <template #default="{ item, index }"> <text class="demo-list-item-text">{{ item['name'] }}</text> </template> </re-list>

<!-- 大数据量 -->
  <re-list class="demo-list-large" :data="largeData" :itemHeight="50" height="400px"> <template #default="{ item, index }"> <text class="demo-list-item-text">第 {{ index + 1 }} 行 - {{ item['name'] }}</text> </template> </re-list>

引入

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

API

List Props

名称类型默认值描述必传
dataArray<UTSJSONObject> @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
itemHeightnumber50 @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
heightstring100% @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 100% @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
bufferCountnumber5 @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 5 @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
keyFieldstringid @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 id @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

List Events

名称参数描述
scrollscrollTop: number滚动时触发
clickitem: UTSJSONObject, index: number点击时触发
update:datadata: Array<UTSJSONObject>-

List Slots

名称描述
default默认插槽
InfiniteLoading 无限加载
滚动到底部时自动加载更多数据，松手后自动加载新内容
SafeArea 安全区域
安全区域组件，用于处理刘海屏、底部安全区域等适配问题