实现下拉滚动加载

最新推荐文章于 2024-07-24 14:58:19 发布

百慕达奶油

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签：滚动下拉 vue下拉加载动态加载加载

本文链接：https://blog.csdn.net/qq_40663497/article/details/94579936

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

下拉滚动加载

首先，如果你本身需要滚动加载的块是隐藏的，那么就等他显示在监听滚动事件，否则直接在mounted里面监听就可以了

// 定义监听事件
const sealPopover = document.querySelector('.choose-seal-content.seal-box');
sealPopover.addEventListener('scroll', this.scroll, true);

// 滚动时请求需要滚动加载的数据
scroll(e) {
    if (e.target.scrollTop + e.target.clientHeight == e.target.scrollHeight) {
    	// 每加载一页当前页加一
        this.sealPage ++;
        this.getSeal('scroll', this.copyInnerCompany, this.copyCompanyIndex);
    }
}

this.axios({
   url: '/apptoken/seal/query',
    method: 'GET',
    params: {
        owner: innerCompany.companyId,
        keyword: this.searchSeal,
        pageNo: this.sealPage,
        pageSize: 10
    }
}).then(res => {
	// 如果总页数等于当前页数，那么就停止滚动加载
	// 如果没有总也是，用每天显示是否是你需要的数量，如果小于停止加载
    if(res.data.result.totalPages == this.sealPage) {
        sealPopover.removeEventListener('scroll', this.scroll, true);
    } else {
        res.data.result.result.map(item => {
            this.sealList.push(item);
        });
    }
})