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

[AthenaDiory]

[lidianhao123]

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

[TimorCookie]

same issue

[TimorCookie]

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

[mitayou]

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