上拉加载更多

这里用到了 IntersectionObserver， 关于这个论述阮一峰老师有专门写到。我这里就参照这个理论做了个工具 为了兼容性我引入了npm install intersection-observer； 然后在入口文件import 'intersection-observer'; 然后就可以开始写工具了

useObserve.tsx                                                                         
export default (ref: React.RefObject<any>, visibleCall, hiddenCall) => {
    const intersectionObserver = new IntersectionObserver((entries) => {
        if (entries[0].intersectionRatio <= 0) {
            hiddenCall();
        } else {
            visibleCall();
        }
    });
    if (ref.current) {
        intersectionObserver.observe(ref.current);
    }
};        

第一个参数传入要监控的对象
第二个参数传入一个监控对象进入显示区域后的回调函数
第三个参数传入一个监控对象超出显示区域后的回调函数

然后怎么使用呢？
在要用的页面 import IntersectionObserver from '...';
在页面上定义一个div作为监控对象像下面这个样子

public render(){                     
    return(          
    ...列表
    <div ref={this.ref}>加载更多</div>
    )
}  

我是用的react,在生命周期 componentDidMount 监控一下。

   public componentDidMount() {
        useObserver(this.ref, this.loadMore, this.hidden);
    }                           
    private loadMore = () => {
        console.log('visible');
    }                       
    private hidden = () => {
         console.log('hidden');
    }     

这样就可以了