react 上拉加载

twinkle_J

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2023-12-13 11:37:41 发布 803 阅读 AI 写同款· GEO 优化 ›

今天项目有个上拉加载的需求，ui框架用的是antd-mobile，

然而框架提供的上拉加载，看不懂，

很想搬砖，

但是怕在这块耗得时间过长，所以就自己造了个上拉加载轮子

需要的可以参考下

import React, { Component } from 'react';
import './myFeedBack.less';
import Header from '@/components/header/Header';
export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = ({
      feedBackList: [],
      current: 1,
      pageSize: 10,
      pages: 0,
      isLoadingMore: false
    });
  }
  componentWillMount() {
    this.getList()
  }
  render() {
    return (
      <div className={this.state.isLoadingMore ? "container haveBg" : "pageContxt haveBg"}>
        <Header history={this.props.history} backIcon title="我的反馈" />
      <div className='myFeedBackPage'>
        <ul className="feedBackList">
          {
            this.state.feedBackList.map((item,index) => {
              return (
                <li className='feedBackItem' key={index}>
                  <div className="feedBackAsk">
                    <img src={require("img/myFeedBack/ask.png")} alt="" />
                    <p>{item.opinion}</p>
                    <span>{item.createTime}</span>
                  </div>
                  <div className="feedBackAnswer">
                    <img src={require("img/myFeedBack/answer.png")} alt="" />
                    <p>{item.feedback}</p>
                    <span>{item.confirmTime}</span>
                  </div>
                </li>
              )
            })
          }
        </ul>
        <div className="loadMore" ref="wrapper" onClick={this.loadMoreDataFn.bind(this, this)}>
          {
            this.state.isLoadingMore ?  '暂无数据' : <p><img src={require("img/myFeedBack/loading.gif")} alt="" /></p>
          }
        </div>
      </div>
      </div>
    );
  }
  getList = () => {
    const url = '接口'
    window.util.post(url,{
      current: this.state.current,
      pageSize: this.state.pageSize,
      userId: localStorage.getItem('userId')
    }).then((res) => {
      console.log(res);
      this.setState({
        pages: res.page.pages
      })
      
      if (res.data.list.length === 0) {
        this.setState({
          isLoadingMore: true
        })
      }else {
        if (res.data.list.length === parseInt(this.state.pageSize, 10)) {
          this.setState({
            isLoadingMore: false,
            feedBackList: this.state.feedBackList.concat(res.data.list)
          })
        }else {
          this.setState({
            isLoadingMore: true
          })
          this.setState({
            feedBackList: this.state.feedBackList.concat(res.data.list)
          })
        }
      }
    }).catch(e => console.log(e))
  }
  componentDidMount() {
    const wrapper = this.refs.wrapper;
    const loadMoreDataFn = this.loadMoreDataFn;
    const that = this; // 为解决不同context的问题
    let timeCount;
    function callback() {
      const top = wrapper.getBoundingClientRect().top;
      const windowHeight = window.screen.height;
 
      if (top && top < windowHeight) {
        // 已经被滚动到页面可视范围之内触发
        loadMoreDataFn(that)
      }
    }
 
    window.addEventListener('scroll', function () {
        if (this.state.isLoadingMore) {
          return ;
        }
        if (timeCount) {
          clearTimeout(timeCount);
        }
        timeCount = setTimeout(callback, 50);
    }.bind(this), false);
  }
 
  loadMoreDataFn(that){
    const url = '接口'
    let currentTemp = ++that.state.current
    window.util.post(url,{
      current: currentTemp,
      pageSize: that.state.pageSize,
      userId: localStorage.getItem('userId')
    }).then((res) => {
      if(currentTemp < that.state.pages+1 ) {
        that.setState({
          feedBackList: that.state.feedBackList.concat(res.data.list)
        })
      }
      if(currentTemp > that.state.pages) {
        that.setState({
          isLoadingMore: true
        })
      }
    })
    
  }
}

收录于