上拉加载时会卡顿，加载完成后，再往上滑，滑不上去 #18

Activity

1. lidianhao123 commented on Dec 28, 2018

   

   lidianhao123

   on Dec 28, 2018

   Member

   More actions

   @AthenaDiory 请提供详细的重现信息用于排查问题，谢谢！
2. lidianhao123

   self-assigned this

   on Dec 28, 2018
3. TimorCookie commented on Apr 12, 2019

   

   TimorCookie

   on Apr 12, 2019

   More actions

   same issue
4. TimorCookie commented on Apr 12, 2019

   

   TimorCookie

   on Apr 12, 2019

   More actions

   import React from 'react';
   import ReactPullLoad, { STATS } from "react-pullload";
   import "react-pullload/dist/ReactPullLoad.css";

   const loadMoreLimitNum = 2;

   const cData = [
   "http://img1.gtimg.com/15/1580/158031/15803178_1200x1000_0.jpg",
   "http://img1.gtimg.com/15/1580/158031/15803179_1200x1000_0.jpg",
   "http://img1.gtimg.com/15/1580/158031/15803181_1200x1000_0.jpg",
   "http://img1.gtimg.com/15/1580/158031/15803182_1200x1000_0.jpg",
   "http://img1.gtimg.com/15/1580/158031/15803183_1200x1000_0.jpg",
   // "http://img1.gtimg.com/15/1580/158031/15803184_1200x1000_0.jpg",
   // "http://img1.gtimg.com/15/1580/158031/15803186_1200x1000_0.jpg"
   ]

   export default class ErrorPage extends React.Component{
   constructor() {
   super();
   this.state = {
   hasMore: true,
   data: cData,
   action: STATS.init,
   index: loadMoreLimitNum //loading more test time limit
   };
   }

     handleAction = action => {
       console.info(action, this.state.action, action === this.state.action);
       //new action must do not equel to old action
       if (action === this.state.action) {
         return false;
       }
   
       if (action === STATS.refreshing) {
         this.handRefreshing();
       } else if (action === STATS.loading) {
         this.handLoadMore();
       } else {
         //DO NOT modify below code
         this.setState({
           action: action
         });
       }
     };
   
     handRefreshing = () => {
       if (STATS.refreshing === this.state.action) {
         return false;
       }
   
       setTimeout(() => {
         //refreshing complete
         this.setState({
           data: cData,
           hasMore: true,
           action: STATS.refreshed,
           index: loadMoreLimitNum
         });
       }, 3000);
   
       this.setState({
         action: STATS.refreshing
       });
     };
   
     handLoadMore = () => {
       if (STATS.loading === this.state.action) {
         return false;
       }
       //无更多内容则不执行后面逻辑
       if (!this.state.hasMore) {
         return;
       }
   
       setTimeout(() => {
         if (this.state.index === 0) {
           this.setState({
             action: STATS.reset,
             hasMore: false
           });
         } else {
           this.setState({
             data: [...this.state.data, cData[0], cData[0]],
             action: STATS.reset,
             index: this.state.index - 1
           });
         }
       }, 3000);
   
       this.setState({
         action: STATS.loading
       });
     };
   
     render() {
       const { data, hasMore } = this.state;
   
       const fixHeaderStyle = {
         position: "fixed",
         width: "100%",
         height: "50px",
         color: "#fff",
         lineHeight: "50px",
         backgroundColor: "#e24f37",
         left: 0,
         top: 0,
         textAlign: "center",
         zIndex: 1
       };
   
       return (
         <div>
           
           <ReactPullLoad
             downEnough={150}
             action={this.state.action}
             handleAction={this.handleAction}
             hasMore={hasMore}
             style={{ paddingTop: 50 }}
             distanceBottom={1000}
           >
             <ul className="test-ul">
               <button onClick={this.handRefreshing}>refreshing</button>
               <button onClick={this.handLoadMore}>loading more</button>
               {data.map((str, index) => {
                 return (
                   <li key={index}>
                     <img src={str} alt="" />
                   </li>
                 );
               })}
             </ul>
           </ReactPullLoad>
         </div>
       );
     }}
   

   用demo的例子就可以重现这个bug
5. mitayou commented on Feb 17, 2020

   

   mitayou

   on Feb 17, 2020

   More actions

   组件生成的类样式.pull-load对应的元素需要给出高度才不会导致计算错误，后面的例子中给了100%的高度，或者使用绝对定位可以解决问题