React实现上拉刷新

React实现下拉刷新、图片懒加载、上滑加载更多、图片预加载

1.首先在componentDidMount钩子函数中，调用接口，之后CarList渲染到页面

async componentDidMount() {
   
    // 这里是调用接口
    this.CarArray = await searchCar({
    page: 1, mod: "宝马" });
    //console.log(this.CarArray)
    // 这里是设置值
    this.setState({
   
      CarList: this.CarArray
    })
    // 图片的加载
    // 获取当前父级元素的高度
    this.ScrollHeight = this.refs.loadMore.scrollHeight;
    //求出每个盒子的高度 
    this.EveryHeight = this.ScrollHeight / this.CarArray.length;
    //求出可视区的高度 
    this.ViewHeight = document.documentElement.clientHeight;
    // 给每个数据添加高度
    this.FnSetHeight();
    for (let i = 0; i < this.ImageList.length; i++) {
   
      // 把路径存在一个盒子里面
      let URL = this.ImageList[i];
      // 创建了一个图片的对象
      let Images = new Image();
      // 把src赋值给它
      Images.src = URL;
      // Images的加载事件
      // this.ImageList.push(`http://www.ibugthree.com/${Car.img_src}`);
      Images.onload = function () {
   
        // 让这个次数 加加然后与图片的length进行比较
        this.ImagLoad++;
        //判断当前的这个次数跟要加载的图片的个数相比较
        if (this.ImagLoad >= this.ImageList.length) {
   
          this.setState({
   
            CarList: this.CarArray,

            loadingState: 0,

          })
        }
      }.bind(this)
      document.onscroll = this.FnDelayedLoad.bind(this);
    }

  }

2.将设置图片的高的代码进行封装，以便于下一次调用

// 这里是对它的一个封装 
  FnSetHeight() {
   
    // 因为不是一个数据
    for (let i = 0; i < this.CarArray.length; i++) {
   
      // 将接口中的每一个值都存到Car里面
      let Car = this.CarArray[i];

      //这里的话是乘以每个的下标
      Car.heights = this.EveryHeight * i;
      // 当前的可视区大于Car的heights的时候

      if (this.ViewHeight >= Car.heights) {
   
        //图片显示
        Car.imageState = 1
        this.ImageList.push(`http://www.ibugthree.com/${
     Car.img_src}`);
      } else {
   
        // 图片不显示
        Car.imageState = 0
      }

    }

  }

3.这里的imageState其实是根据不同的情况来显示

ImageState(item) {
   
    //   imageState=1的时候
    if (item.imageState) {
   
      // 图片的路径是车图片
      return `http://www.ibugthree.com/${
     item.img_src}`;
    } else {
   
      // 默认图片
      return `http://www.ibugthree.com/default.gif`;
    }
  }

4.最后的话添加它的上滑加载更多

 async FnDelayedLoad() {