[JavaScript知识库]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() {
    this.ScrollTop = document.documentElement.scrollTop;
    this.ViewHeight = document.documentElement.clientHeight;
    for (let i = 0; i < this.state.CarList.length; i++) {
      let Car = this.state.CarList[i];
      this.ScrollHeight = this.refs.loadMore.scrollHeight;
      //求出每个盒子的高度 
      this.EveryHeight = this.ScrollHeight / this.state.CarList.length;
      Car.heights = this.EveryHeight * i;
      if (this.ScrollTop + this.ViewHeight >= Car.heights) {
        Car.imageState = 1
      } else {
        Car.imageState = 0
      }
      this.setState({
        CarList: this.state.CarList
      })
    }
    //判断当前的
    this.ScrollHeight = this.refs.loadMore.scrollHeight;
    if (this.ScrollTop + this.ViewHeight >= this.ScrollHeight) {
      if (this.LoadingSwith) {
        this.LoadingSwith=false
        this.page++;
        let CarData = await searchCar({ mod: "宝马", page: this.page });
        this.state.CarList = this.state.CarList.concat(CarData);
        this.LoadingSwith=true
        this.setState({
          CarList: this.state.CarList.concat(CarData)
        })
      }

    }
    this.state.LoadingMore = true;
    this.FnSetHeight();
    this.setState({
      CarList: this.state.CarList
    })
  }

最后实现一下下拉刷新

FnStart(ev) {
    //滚动元素删除active这个类名
    this.refs.loadMore.classList.remove('active');
    //当前滚动的pageY 也就是初始值的位置
    this.startY = ev.changedTouches[0].pageY
    // 当前的pageY=鼠标距离顶部的距离-当前页面距离顶部的距离
    this.PageY = this.startY - this.refs.loadMore.getBoundingClientRect().top;
  }
  FnMove(ev) {
    // 鼠标距离顶部的距离
    this.ScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    this.moveY = ev.changedTouches[0].pageY;
   // console.log(this.ScrollTop)
    if (this.moveY > this.startY && this.ScrollTop==0) {
      // this.Y 是指移动的距离
      this.Y = this.moveY - this.PageY;
      // 这里是倍数   因为拉的时候走的不是很流畅
      this.scale = 1 - this.Y / 736;
      if (this.scale <= .58) this.scale = .58;
      // 设置动画   Y值的距离是指 移动的距离*倍数 
      this.refs.loadMore.style.transform = `translate(0,${this.Y * this.scale}px)`;
    }
  }
  async FnEnd(ev) {

    // 获取当前元素的pageY
    this.UpY = ev.changedTouches[0].pageY;
    // 滚动盒子添加active这个类名
    this.refs.loadMore.classList.add('active');
    //这里是松手后让translate的值为0
    this.ScrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
      console.log(this.ScrollTop)
    if (this.ScrollTop ==0) {
      setTimeout(() => {
        this.refs.loadMore.style.transform = `translate(0,0)`;
      }, 3000)
      //  判断当前距离顶部的距离>初始值的距离 并且 当前的scrollTop的值
      if (this.UpY > this.startY) {
        // 所有的数据恢复之前状态
        //  this.FnInitData;
        // // // 图片预加载 设置高度
        
      }
    }

  }

state里面定义的数据

 constructor(...args) {
    super(...args);
    this.state = {
      CarList: [],
      loadingState: 1,
    }
    this.ImageList = []
    this.ImagLoad = 0
    this.page = 0
    // 这里是调用接口的时候的开关
    this.LoadingSwith = true
  }

css部分

.load-more {
  position: relative;
}

.load-more .load-more-loading {
  width: 100px;
  height: 100px;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 30px;
}

.load-more .shadow {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
}
.Loading-shadow{
  position: absolute;
  height:100vh;
  width:100vw;
  left: 0px;
  top: 0px;
  z-index: 2;
  touch-action:none;
  background-color: white;
}
.load-more .shadow .loading {
  width: 100px;
  height: 40px;
  margin: 0 auto;
  margin-top: 100px;
}

.load-more .shadow .loading span {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load 1s ease infinite;
  margin: 0 3px 0 3px;
}

@-webkit-keyframes load {
  0%,
  100% {
    height: 40px;
    background: lightgreen;
  }
  50% {
    height: 70px;
    margin: -15px 0;
    background: lightblue;
  }
}

.load-more .shadow .loading span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
}

.load-more .shadow .loading span:nth-child(3) {
  -webkit-animation-delay: 0.4s;
}

.load-more .shadow .loading span:nth-child(4) {
  -webkit-animation-delay: 0.6s;
}

.load-more .shadow .loading span:nth-child(5) {
  -webkit-animation-delay: 0.8s;
}

.load-more .load-more-list.active {
  transition: .25s ease-in all;
}

.load-more .load-more-list {
  background: #fff;
  position: relative;
  z-index: 2;
}

.load-more .load-more-list .load-more-car::after {
  display: block;
  content: "";
  width: 723px;
  height: 1px;
  background: #ededed;
  position: absolute;
  right: 0;
  margin: 42px 0 29px 0;
}

.load-more .load-more-list .load-more-car {
  position: relative;
  height: 230px;
  padding: 29px 0 0 0;
}

.load-more .load-more-list .load-more-car .load-more-item {
  display: flex;
  flex-wrap: wrap;
}

.load-more .load-more-list .load-more-car .load-more-item .load-more-left {
  padding: 0 0 0 14px;
  width: 249px;
  height: 187px;
}

.load-more .load-more-list .load-more-car .load-more-item .load-more-left .load-more-kmr {
  width: 249px;
  height: 187px;
  border-radius: 10px;
}

.load-more .load-more-list .load-more-car .load-more-item .load-more-right {
  padding: 0 0 0 19px;
}

.load-more .load-more-list .load-more-car .load-more-item .load-more-right .load-more-title {
  width: 426px;
  font-size: 27px;
  color: #000;
  font-weight: bold;
}

.load-more .load-more-list .load-more-car .load-more-item .load-more-right .load-more-information {
  display: flex;
  color: #ababab;
  font-size: 19px;
  line-height: 19px;
  padding: 11px 0 0 0;
}

.load-more .load-more-list .load-more-car .load-more-item .load-more-right .load-more-information .load-more-line {
  width: 3px;
  height: 19px;
  background: #ababab;
  margin: 0px 7px 0 8px;
}

有什么不懂的可以私信我呀！！！！