React 页面上拉到底部后如何触发事件

版权声明： https://blog.csdn.net/qq_23521659/article/details/84632873

应用场景：

资讯流初始化加载一页数据，上拉触底后，继续加载一页的数据；

1，绑定滚动事件；

2，计算触底高度，达到高度触发事件；

绑定事件：

handle为触发的函数；

    componentDidMount() {
        window.addEventListener("scroll",this.handle.bind(this))
    }

计算高度：

console.log("数据的高-----------------------", this.refs.onPullUp.clientHeight);
console.log("滚动的高----------------------", document.documentElement.scrollTop);
console.log("屏幕的高----------------------", document.documentElement.clientHeight);

到底后打印的数据：

onPullUp为绑在DOM上的属性：

判断是否到底：

 let onPullUpHeight=this.refs.onPullUp.clientHeight;
        let documentHeight=document.documentElement.clientHeight;
        let documentTop=document.documentElement.scrollTop;
        if(onPullUpHeight>documentHeight&&onPullUpHeight===documentHeight+documentTop-50){
            layer.open({content:"到底了"})
        }

=========================================================

注意：

scroll事件 真机测试失效，使用 touchmove 代替；

（touchmove 在用户手指离开屏幕后，页面滑动期间，是不触发事件的，最终决定与scroll并用）

document.documentElement.scrollTop 失效，使用window.scrollY代替；