仿照微信分页上滑加载更多

<div className="right_Sco" id="scoID" onScrollCapture={() => this.handleOnScroll()} ref={dom => {this.dom = dom}}>
    
</div>

  .right_Sco{
    overflow-y: scroll;
    height: 482px;
    width:100%;
  }

    // 加载更多
     handleOnScroll=()=>{
         let that = this;
         that.handleMore();

     };
 // 处理更多
     handleMore(){
         let that = this;
         const {nextReqMessageID,conversationID,messageList,xAll} = this.state;
         if (that.dom) {
             const contentScrollTop = that.dom.scrollTop;
             var x = 0;
             if (contentScrollTop<10){
                 if (xAll === undefined){
                     x =  that.dom.scrollHeight - that.dom.scrollTop;
                 }else {
                     x = xAll;
                 }
                 console.log('当前位置===',x);
                 let promise = tim.getMessageList({conversationID: conversationID, nextReqMessageID, count: 15});
                 promise.then(function(imResponse) {
                     const messageLists = imResponse.data.messageList; // 消息列表。
                     console.log('续加=',messageLists);
                     const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
                     const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
                     that.setState({
                         messageList:messageLists.concat(messageList),
                         moreFlag:isCompleted,
                         nextReqMessageID:nextReqMessageID,
                         xAll:x
                     },function () {
                         if (!isCompleted){
                             let ele = document.getElementById('scoID');
                             ele.scrollTop = x;
                             console.log('x====',x)
                         }

                     });
                 });
             }
         }
     };

 

来源：oschina

链接：https://my.oschina.net/u/3407708/blog/4298487