Listview
- category: UI
- chinese: 列表
- type: UI组件
何时使用
用于展现一个数据列表,和 ScrollView
不同,ListView
使用 weex list 组件内存回收复用的能力,达到复用 cell 不卡顿的效果。
API
ListView
属性 | 说明 | 类型 | 默认值 |
---|
renderHeader | 头部 | function | 无 |
renderFooter | 底部 | function | 无 |
renderRow | 渲染单行的方法 | function | 无 |
dataSource | 数据源 | array | 无 |
onEndReached | 加载到底部时触发 的事件 | 原onloadmore 事件 | 无 |
onEndReachedThreshold | 加载更多的位移量 | string | 500 |
showScrollbar | 是否显示滚动条 | bool | 无 |
resetLoadmore | 重设loadmore计数 [以下单独说明] | function | 无 |
resetLoadmore 实例方法
这是一个重置 onEndReached 是否能触发的
标记位的方法。
标记位默认为 true,即滚动到底部即可触发 onEndReached 事件。
但当 onEndReached 触发后,没有通过 setState 增加数据导致页面 scroller 内容变长,(或者反而变短了),native 端会将标记位设置为 false。
此时调用 resetLoadmore ,可以清除标记位,让 onEndReached 可以再次触发。
//调用 resetLoadmore 以保证上一次加载不到数据后,下次还能继续触发 onEndReached
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/>
)
}