UNPKG

weex-nuke

Version:

基于 Rax 、Weex 的高性能组件体系 ~~

50 lines (38 loc) 2.15 kB
# 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 是否能触发的` 标记位的方法。 onEndReached 触发后,如果页面内容没有变长,或者反而变短了,下次再滑动到底部,onEndReached 不会被触发了。此时调用 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} /> ) } ```