下拉加载怎么实现

1、监听scroll事件

const containerDom:RefObject<HTMLDivElement> = useRef(null)

        //const myHref = useHref()

        const containerScroll = useCallback((event)=>{

                const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)

                || window.pageYOffset

                || (event.srcElement ? event.srcElement.body.scrollTop : 0);

                 console.log('触发了滚动事件',scrollTop)

                if(scrollTop>60){

                        containerDom.current?.classList.remove('header_active')                         containerDom.current?.classList.add('header_hidden')

                 }else{

                        containerDom.current?.classList.remove('header_hidden')                         containerDom.current?.classList.add('header_active')

                 } },[])

                useEffect(()=>{

                        window.addEventListener('scroll',containerScroll)

                        return ()=>{

                                window.removeEventListener('scroll',containerScroll)

                        }

                 },[])

2、IntersectionObserver

// 获取要监测的元素

const boxes = this.oberservDom.current

//  

// 创建观察者，配置回调函数 // 通过 isIntersecting 属性判断元素与视口是否相交

const observer = new IntersectionObserver((entries, observer) => {

        if(!this.state.flag){

                this.append()

         }

        console.log(entries)

})

//  

observer.observe(boxes);