vue实现纯前端表格滚动分页加载 |
您所在的位置：网站首页 › vue表格滚动 › vue实现纯前端表格滚动分页加载 |
vue实现纯前端表格滚动分页加载
|
本文实例为大家分享了vue实现表格滚动分页加载的具体代码，供大家参考，具体内容如下 实现效果
实现过程 正在加载数据js data() { return { visibleLoading: false, } }, mounted() { //ref指向对应div，不建议对window全局监听，会影响子div的滚动 this.$refs.container.addEventListener('scroll', this.handleScroll); }, beforeUnmount() { this.$refs.container.removeEventListener('scroll', this.handleScroll); }, methods:{ //滚轮监听 handleScroll() { let listAllHeight = document.documentElement.scrollTop || document.body.scrollTop + document.documentElement.scrollHeight || document.body.scrollHeight; let containerHeight = document.querySelector('#container').scrollHeight; //46 + 62 + 75是表格距离页面顶部的剩余距离，跟个人布局有关 let fieldHeight = document.querySelector('#left-field').scrollHeight + 46 + 62 + 75; if ( (fieldHeight >= containerHeight && this.pageHeight !== fieldHeight) || (containerHeight > fieldHeight && this.pageHeight !== containerHeight) ) { this.visibleLoading = true; } setTimeout(() => { if (listAllHeight === this.pageHeight && this.pageHeight < containerHeight) { this.pageHeight = this.pageHeight + 750; } if (this.pageHeight > containerHeight && containerHeight > fieldHeight) { this.pageHeight = containerHeight; } if (this.pageHeight > fieldHeight && fieldHeight >= containerHeight) { this.pageHeight = fieldHeight; } this.visibleLoading = false; }, 500); }, }css .loading-bottom { position: absolute; left: 255px; bottom: 0; height: 30px; padding: 5px 0; background-color: #d3dae6; width: calc(100% - 270px); text-align: center; font-size: 14px; font-weight: 500; border-radius: 2px; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 您可能感兴趣的文章:vue实现滚动加载的表格vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码vue elementUI table表格数据 滚动懒加载的实现方法vue element-ui table表格滚动加载方法vue使用动画实现滚动表格效果 |
【本文地址】