elementUI实现列表树滚动到底部加载更多

时间：2023-03-28 19:38:26 HTML

需求：在项目实际开发中，列表树可能没有明确给分页按钮。大多数时候，目标将用于滚动到底部以触发下一页数据的加载。version:vue2component:el-treetemplate:{{data.name?data.name:data.account}}

scriptmethods:{/***需要先初始化监听器，注意不要重复监听*注意vue的this和listener里面的this的区别*滚动到当前页面底部时加1***/loadMoreUser(){constthat=this;document.querySelector('.user-list').addEventListener('scroll',function(){//scrollHeight：内容区域的总高度//clientHeight：内容可见区域的高度//scrollTop：距离滚动条顶部的位置//总高度减去距离顶部的距离然后负5判断是否小于可见区域的高度，根据需要调整if(parseInt(this.scrollHeight-this.scrollTop-5){//请求失败if(res.errors&&res.errors[0]){this.$message({type:"warning",message:res.errors[0].message})}elseif(res.data&&res.data.users){//接口请求成功this.total=res.data.users.totalCount;letnewlist=commonjs.takeoffEdges(res.data,'users');this.treedata=this.treedata.concat(newlist);//请求的新数据跟在旧数据后面}})//接口后结束关闭加载this.loading=false;},}注意：1：需要给定列表树的高度2：滚动前，需要添加滚动事件的监听器，注意不要重复监听3：滚动到底部时，是需要计算加载的数据是否小于总数据，如果总数据小于总数据，则加载可以继续。否则，应该通知用户加载已经完成。4：接口请求数据，处理后连接到之前的数据。如果有更好的解决办法，请给我上面的链接~

上一篇：“后端哥们是来学前端的，”关于Vue中的道具

下一篇：基于SAPUI5应用的ODataXML格式元数据请求分析原理，基于DOMParser

elementUI实现列表树滚动到底部加载更多相关文章