滚动加载

// 滚动内容最下方节点
<div id="scroll-el"></div>
// 接口请求数据
const getInfoList = () => {
    post_wujie('xxx接口', {
        page: pageObj.value.page,
        limit: pageObj.value.limit,
        start: (pageObj.value.page - 1) * pageObj.value.limit
    }).then((res: any) => {
        let data = res.data;
        let num = res.totalNum
        informationList.value = data
        if (informationList.value.length < num) {
            openOrClose.value = true;
        } else {
            openOrClose.value = false;
        }
    })
}

// 是否继续加载的开关
const openOrClose = ref(true)
const pageObj = ref({
    page: 1,
    limit: 10
})

const changeScrollSlide = () => {
    let el2 = document.getElementById('scroll-el')
    if (el2 && el2.getBoundingClientRect().top < document.documentElement.scrollHeight && openOrClose.value === true) {
        openOrClose.value = false;
        pageObj.value.page += 1
        getInfoList()
    }
}
window.addEventListener('scroll', changeScrollSlide, true)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容