# MListView 分页列表

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/list-view/freepass)
- 平台：移动端
- 维护者：王斌
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/zms/zujian-list/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MListView]

## 代码演示

### 基础用法

```jsx
import React, { Component } from 'react';
import { MListView, MListData } from '@weapp/ui';
import MListViewDemoStore from './store';
import { datas } from './mock'
// import './index.less'

const mListViewDemoStore = new MListViewDemoStore();
const listViewStore = mListViewDemoStore.listView

export default class ListViewDemo extends Component {
  constructor(props:any) {
    super(props);

  }

  componentDidMount() {
    const { getData, setState } = listViewStore

    // 接口调用
    // const requestConfig: RequestOptionConfig = {
    //   url: 'xxx/xxx/xxx',
    //   method: 'get',
    //   params: {
    //     type: 2
    //   }
    // }

    // getData(requestConfig)

    // mock数据
    setTimeout(() => {
      setState({ data: datas })
    }, 200)
  }

  customRenderItem = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <span key={rowID}>
        {obj.title}
      </span>
    );
  }

  render() {
    return (
      <div style={{ height: '460px', overflowY: 'scroll' }}>
        <MListView
         
          store={listViewStore}
          customRenderContent={this.customRenderItem}
          className={'ui-list-view-demo'}
        />
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| store | 列表实例 | ListViewStore | 是 |  |
| emptyLabel | 数据为空时提示 | ReactNode | 否 |  |
| onRefresh | 刷新回调 | () => void | 否 |  |
### ListViewStore 参数、方法说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| getData | 请求列表数据 | (options: RequestOptionConfig, isInit?: boolean) => void |  |  |
| setState | 更新设置列表内数据（外部更新 store 内数据请使用此方法，不建议直接赋值操作） | (params?: any) => void |  |  |
| getRealConfig | 请求参数转换,可以拦截对应请求参数进行修改 | (config: RequestOptionConfig) => RequestOptionConfig | 否 |  |
### 说明：

ListView 是基于 ui 移动端 List 组件基础上开发，移动端 List 支持的 API 基本上 ListView 都会支持。目前 data 是完全由接口控制传入，后续会新增 API 支持外部复写。
