# Listview

- category: UI
- chinese: 列表
- type: UI Component

---

## Usage
  
Be used to show a datalist, which is different with `ScrollView`, `ListView` uses the weex list component memory reuse capability, in order to reuse cell smoothly.

## API

### ListView

| Attribute             | Description                                           | Type             | Default |
| --------------------- | ----------------------------------------------------- | ---------------- | ------- |
| renderHeader          | header                                                | function         | null    |
| renderFooter          | footer                                                | function         | null    |
| renderRow             | render single row                                     | function         | null    |
| dataSource            | data source                                           | array            | null    |
| onEndReached          | The event that was triggered when the unit was loaded | onloadmore event | null    |
| onEndReachedThreshold | load more displacement                                | string           | 500     |
| showScrollbar         | show the scroll bar                                   | bool             | null    |
| resetLoadmore         | reset the loadmore count(explanation following)       | function         | null    |



### resetLoadmore demo reference
  
  
This is a method that reset the flag of `onEndReached can be triggered?`. The flag's default value is true, that is, which scrolls to the bottom to trigger the onEndReached event. However, **the native app will set the flag to false, if the target has triggered the onEndReached event but the content of page scroller becomes more ( or less instead ) without loading more data through the setState.**   
 
Call the resetLoadmore to reset the flag so that the onEndReachen event could be triggered again.  


```
    //Call the resetLoadmore to reset the flag so that the onEndReachen event could be triggered again.
    reset=(e)=>{
        this.refs.mylist.resetLoadmore();
    }
    render(){
        return (
                <ListView ref="mylist"
                    renderHeader={this.renderHeader}
                    renderFooter={this.renderFooter}
                    renderRow={this.renderItem}
                    dataSource={this.state.data}
                ><ListView/>
        )
    }
```

## The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />