---
title: WKListView 列表数据
group:
  title: 展示组件
  path: /show/
---

## 何时使用

- 需要展示列表数据的情况，如商品列表、订单列表等
- WKListView 需要自己维护下拉刷新，上拉加载更多，首次调用请求数据等；

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import { View, WKListView, WKDivider, WKImage } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  const data = {
    id: 72,
    appId: 1132,
    storeName: 'w零食自营店',
    storeNo: '202112160001',
    activityType: 0,
    itemNo: '202112160011',
    itemCreateTime: '2021-12-17 17:04:10',
    name: '苹果',
    categoryName: '苹果',
    isShelf: 1,
    salePrice: 200,
    labelPrice: 2000,
    categoryId: 130,
    thumbnail: 'https://dxcc.octohbay.net/test-material-1259575047/332e2c6727c9435cb337853befdd2523.png',
    salesVolume: 1,
    cashCommissionRate: 80,
    cashCommissionAmount: 160,
    sourceType: 1,
    stock: 1,
    copyItemNo: '202112160011',
    amountMode: false,
  };
  const [dataSource, setDataSource] = useState(Array(50).fill(data));
  const [loading, setLoading] = useState(true);
  const [hasMore, setHasMore] = useState(true);

  const headerView = <View style={{ backgroundColor: 'orange', width: '100vw', height: '50px' }}>头部</View>;
  // const footerView = (
  //   <View style={{ backgroundColor: 'orange', width: '100vw', height: '50px', position: 'absolute' }}>尾部</View>
  // );
  const loadingView = (hasMores: boolean) => {
    return <WKDivider tip={hasMores ? '加载中....' : '这就是我的底线了'} />;
  };

  const good = {
    display: 'flex',
    flexDirection: 'column',
  };
  const goodContent = {
    display: 'flex',
    flexDirection: 'row',
  };
  const img = {
    margin: '20px',
    zIndex: 100,
    width: '180px',
    height: '180px',
  };
  const content = {
    display: 'flex',
    flexDirection: 'column',
  };
  const marginTop = {
    marginTop: '5px',
  };

  return (
    <PageWrapper title="基本使用">
      <View style={{ position: 'relative', width: '100%'}}>
        <WKListView
          contentStyle={{ marginTop: '50px' }}
          footerStyle={{ position: 'absolute', height: '50px', bottom: 0 }}
          headerStyle={{ position: 'fixed', height: '50px', top: 0, zIndex: 99999 }}
          dataSource={dataSource}
          onRefresh={() => {
            setHasMore(true);
            setLoading(true);
            setTimeout(() => {
              setDataSource(Array(20).fill(data));
              setLoading(false);
            }, 3000);
          }}
          onLoadMore={() => {
            setHasMore(dataSource.length <= 80);
            setLoading(true);
            if (hasMore) {
              setTimeout(() => {
                setDataSource(dataSource.concat(Array(20).fill(data)));
                setLoading(false);
              }, 3000);
            }
          }}
          renderItem={(item: { id: string | number | undefined; name: any }, index: any) => {
            return (
              <View style={good} key={item.id + index}>
                <View style={goodContent}>
                  <WKImage style={img} width="50px" height="50px" src={item.thumbnail} />
                  <View style={content}>
                    <View style={marginTop}>{item.name + index}</View>
                    <View style={marginTop}>{item.storeName + index}</View>
                    <View style={marginTop}>￥{item.salePrice}</View>
                  </View>
                </View>
                <WKDivider style={{ margin: '0 20px' }} />
              </View>
            );
          }}
          header={headerView}
          renderLoading={loadingView}
          loading={loading}
          hasMore={hasMore}
        />
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKListView/WKListView.d.ts'></API>

## WKEmptyProps

| Name      | Description    | Type                                                                   | Default         |
| --------- | -------------- | ---------------------------------------------------------------------- | --------------- |
| className | 类名           | `string`                                                               |                 |
| style     | 样式           | `React.CSSProperties`                                                  |                 |
| type      | 类型           | `'error' \| 'network' \| 'empty' \| 'default' \| 'search' \| 'custom'` | `default`       |
| url       | 自定义图标地址 | `string`                                                               | `./default.png` |
| desc      | 描述           | `React.CSSProperties`                                                  |                 |
| detail    | 详情           | `React.CSSProperties`                                                  |                 |
| retryText | 重试文本       | `React.CSSProperties`                                                  |                 |
| onRetry   | 点击触发重试   | `() => void`                                                           |                 |
