react函数触底组件加载

我们想要判断一个div是否已经触底了，我们首先要给这个div绑定一个onScroll属性，在这我们获取滚动条的高度，页面可视高度和滚动轴到顶部的距离

 scroll=(event)=>{
    // 整个滚动的高度
    console.log(event.target.scrollHeight);
    // 获取页面可视的高度
    console.log(event.target.clientHeight);
    // 获取滚动条距顶部的距离
    console.log(event.target.scrollTop);
    // 如果顶部的高度加上我们页面可视的高度大于等于整个滚动轴的高度，那么说明他触底了
    if(event.target.scrollTop+event.target.clientHeight+20>event.target.scrollHeight){
        alert('触底了')
        this.getlist(20)
    }
  }

scroll函数有一个event参数，打印event，我们可以看到event下面的所有的属性

在页面样式中，我们想要出滚动轴，那就需要使用 overflow: scroll出现滚动轴

完整的触底组件代码

import React, { Component } from 'react'
import './Chudi.scss'

export default class Chudi extends Component {
  constructor(){
    super()
    this.state={
        num:1,
        list:[]
    }
  }
//   获取一个接口的方法
  getlist(n){
    for(let i=this.state.num;i{
    // 整个滚动的高度
    console.log(event.target.scrollHeight);
    // 获取页面可视的高度
    console.log(event.target.clientHeight);
    // 获取滚动条距顶部的距离
    console.log(event.target.scrollTop);
    // 如果顶部的高度加上我们页面可视的高度大于等于整个滚动轴的高度，那么说明他触底了
    if(event.target.scrollTop+event.target.clientHeight+20>event.target.scrollHeight){
        alert('触底了')
        this.getlist(20)
    }
  }
    render() {
    return (
      

        {/* 循环数据 */}
        {
            this.state.list.map((item,index)=>{
                return (
                    

                        {item.value}
                    
                )
            })
        }
      
    )
  }
}

页面触底之后弹出一个对话框，点击确认，数据会继续刷新加载