滚动加载更多实现

本节目标：理解“滚动加载更多实现”的核心思路，并能把它用于实际开发或面试表达。先计算容器的高度：

  componentDidMount() {
    document.title = '

商铺搜索

'
    const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).offsetTop;
    this.setState({ height: hei }, this.getShopList);
  }

其中this.lv为容器，由于lv为body的子元素，所以它的高度可以使用body.clientHeight-容器.offsetTop得出，其中

offsetTop

即容器相对父元素的偏移值。这样的话，除了了窗口上部的内容，

body

中所有的高度都给了容器。

<ListView
    ref={el => this.lv = el}
    dataSource={dataSource}
    renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
        {isLoading ? '

数据加载中

...' : '

加载完成

'}
    </div>)}
    renderRow={row}
    style={{
        height: this.state.height,
        overflow: 'auto',
    }}
    pageSize={8}
    onScroll={() => { console.log('scroll') }}
    scrollRenderAheadDistance={500}
    onEndReached={this.onEndReached}
    onEndReachedThreshold={10}
/>

滚动加载更多实现 ​

滚动加载更多实现