react-移动端上拉加载功能

 

<article onScroll={this.handleScroll.bind(this)} ref="scrollWrap" data-scroll={'yes'} style={{ "height": "calc(100vh - 3.5rem)", "overflow": 'auto', "overflowY": "scroll", "WebkitOverflowScrolling": "touch" }}>
        <div className="wrap" ref="productList">
             遍历的内容
        </div>
</article>

 

    handleScroll(topVal) {
        let self = this;
        let isPending = this.state.isPending;
        let clientHeight = this.refs.productList.clientHeight;
        let scrollHeight = this.refs.scrollWrap.clientHeight;
        let scrollTop = this.refs.scrollWrap.scrollTop;

        if(!isPending){
            if (scrollHeight + scrollTop +5 >= clientHeight) {
                self.setState({isPending:true});
                self.getMoreProducts(this.state.pageNum+1);
            }
        }

    }