vue3来实现监听下拉懒加载

// 看当前是否正在懒加载
let isLoading = ref(false);
// 记录上次请求懒加载的时间
let lastGetDataTime = ref(0);

// 分页数据
const iPagination = reactive({
    pageNum: 1,
    pageSize: 40,
    total: undefined,
});

// 暂无更多是否展示
let noMoreShow = ref(false);

// 懒加载视频推荐列表
const lazyGetRecommendList = () => {
    // 如果当前页码的值<=总条数/当前展示的条数，则继续加载数据
    if (iPagination.pageNum < iPagination.total / iPagination.pageSize) {
        iPagination.pageNum = iPagination.pageNum + 1;
        isLoading.value = true; // 正在请求数据
        getShowLiveVideoPlaybackList(); // 调用接口
    } else {
        if (!noMoreShow.value && iPagination.total != void 0) {
            noMoreShow.value = true;
        }
    }
};

// 懒加载数据的方法
const lazyLoadData = () => {
    // 浏览器已经滑上去的高度
    const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
    // 浏览器整体高度包括不可见区域
    const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
    // 浏览器可视高度
    const clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
    // console.log(scrollTop, scrollHeight, clientHeight);
    if (
        scrollTop + clientHeight >= scrollHeight - 50 &&
        !isLoading.value &&
        new Date().getTime() - lastGetDataTime.value > 500
    ) {
        // 记录请求数据的时间
        lastGetDataTime.value = new Date().getTime();
        lazyGetRecommendList();
    }
};

onMounted(() => {
    window.addEventListener("scroll", lazyLoadData);
});

onUnmounted(() => {
    window.removeEventListener("scroll", lazyLoadData);
});