上拉加载更多

这里用到了 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'); }
这样就可以了

转载于:https://juejin.im/post/5c94690b5188252d812c51ae