上滑加载组件，引入即可用

说明

1. 创建文件夹UpLoad
2. 创建文件index.tsx,将下面部分的ts部分贴入
3. 创建index.module.scss,将下面的scss部分贴入
4. 在需要上滑加载的地方引入本组件，然后传入配置项loadMore，此配置项为一个函数，必须返回一个promise，为触底执行的回调。就完成了上滑加载的功能，本组件无需修改，直接引入传入回调即可实现上滑加载的效果

TS部分

import React, { useEffect, useRef, useState } from "react";
import style from "./index.module.scss";
type props = {
  loadMore: () => Promise<any>;
  hasMore?: boolean;
};
const UpLoad = ({ loadMore, hasMore }: props) => {
  const upLoadRef = useRef<HTMLDivElement>(null);
  const flag = useRef(true);
  useEffect(() => {
    upLoadRef.current!.parentNode?.addEventListener("scroll", async (e) => {
      const top = upLoadRef.current?.offsetTop;
      let ev = e.target as HTMLDivElement;
      let scrollTop = ev.scrollTop;
      const clintHeight = ev.offsetHeight;
      if (scrollTop + clintHeight > top!) {
        if (flag.current) {
          flag.current = false;
          console.log("触底了");
          await loadMore!();
          flag.current = true;
        }
      }
    });
  }, []);

  return (
    <div className={style.root} ref={upLoadRef}>
      上拉加载
    </div>
  );
};
export default UpLoad;

scss部分

.root{
  width: 100%;
  height: 50px;
  background-color: blue;
  :global{
    .son{
      width: 100%;
    }
  }
}