XList 列表

示例

基础用法

正在加载数据...

• 1

<template>
  <div style="height: 300px">
    <XList :data="loader" data-key="id" @load="onLoad" :page="1" pager>
      <template #="{ item, index }">
        <XDataItem
          split
          direction="row"
          image-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          image-height="100px"
          image-width="100px"
          :title="`占位内容加载失败_${JSON.stringify(item)}_${index}`"
          description="可通过lazy开启懒加载功能， 当图片滚动到可视范围内才会加载。 可通过 scroll-container 来设置滚动容器， 若未定义，则为最近一个 overflow 值为 auto 或 scroll 的父元素。">
        </XDataItem>
      </template>
    </XList>
  </div>
</template>
<script lang="ts" setup>
  import { XList, XDataItem, type ListData } from '@vtj/ui';

  const onLoad = (params: any) => {
    console.log('trigger load', params);
  };

  const loader = (state: any) => {
    console.log('do loader', state);
    const total = 100;
    const { page = 1, pageSize = 10 } = state;
    const list: any[] = [];
    for (let i = 0; i < pageSize; i++) {
      list.push({
        id: (page - 1) * pageSize + i
      });
    }

    return new Promise<ListData>((resolve) => {
      setTimeout(() => {
        resolve({
          list,
          total
        });
      }, 20);
    });
  };
</script>

API

属性

属性名	说明	类型	默认值
data	要在表中渲染的数据对象	object | function	[]
itemHeight	设置 itemHeight 即自动开启虚拟滚动	number | function	-
width	表格的宽度	string | number	'100%'
height	表格的高度	string | number	'100%'
pager	开启分页	boolean | object	-
page	初始页码	number	1
pageSize	初始每页显示条目个数	number	50
dataKey	数据的 Key，用来优化 Table 的渲染；	string	-
infiniteScroll	滚动到底部时，加载更多数据	boolean | object	-

属性 data: { list: any[], total?: number, pageSize: number, page: number, }

属性 infiniteScroll: { disabled?: boolean; delay?: number; distance?: number; immediate?: boolean; }

事件

名称	说明	参数
load	加载数据	(state: ListState)

插槽

插槽名	说明	类型
loading	加载中	-
nomore	没有更多数据了	-

暴露

名称	说明	类型
list	列表数据中的data	-
wrapperRef	-	-
loading	加载状态	-
state	page,pageSize	-
pageCount	当前页数	-
nomore	没有更多数据	-
data	列表数据	-
getKey	获取列表数据的key	function
scrollTo	滑动到	function