表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口

不知道UI抽什么风，所有列表都没用分页器，一律采用滚动加载。但我又是个懒蛋，不想手写所以就用了element-plus的无限滚动，但是v-infinite-scroll和el-table这俩搁一块就有bug了啊！！！在网上找了半天没遇到相似问题，现在来记录一下。

问题描述
本次开发中其实可以不用el-table的，因为这个列表并不展示头部，但是我又极其热爱el-table，所以不顾老大劝阻还是用了。好了好了，问题就是——列表滚动分页，但是滚动条定位底部不回弹导致接口不断请求。

BUG原因
由于 chrome 56 以及之后版本，开启了 “滚动锚定（Scroll Anchoring）” 这个功能，当我们滑动鼠标滑轮后表格加载大量数据，滚动条会自动跑到最底部并且定位到底部。这就会触发滚动加载，导致不断请求接口。

解决办法
在出现问题的元素上也就是绑定v-infinite-scroll的元素加上 overflow-anchor这个属性，问题就解决啦。

overflow-anchor: none;

扼要代码示例

表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口相关推荐

react-infinite-scroller组件滚动分页加载
// 部分代码片段 import InfiniteScroll from 'react-infinite-scroller'; import {Scrollbars} from 'react-cust ...
Vue组件滚动加载、懒加载功能的实现，无限滚动加载组件实例演示
效果图如下: 可以看到随着不断的滚动,页面组件的数量不断的加载. 其实加载的是后端返回的数据,因为涉及隐私,没有给显示出来. 利用懒加载,可以防止大量渲染造成卡顿降低用户体验. 页面的动态加载这块可以 ...
普元EOS：DataGrid表格实现分页加载、自定义列、单元格渲染、行编辑器、锁定列、过滤行、汇总行等功能。
demo(例子) <div id="datagrid1" class="nui-datagrid" style="width:700px;hei ...
c# ui 滚动分页_UI备忘单：分页，无限滚动和“加载更多”按钮
c# ui 滚动分页重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...
Android GridView横向滚动，分页加载数据
转载请注明出处,谢谢http://blog.csdn.net/harryweasley/article/details/51007348 始终觉得讲ui效果要先放上效果图,要不让其他人好不容易看完了, ...
listView分批和分页加载数据
在Android应用程序中,有时候会向listView中加载很多数据,向listView中加载数据是一个耗时的过程,加载过多的数据用户停留在listView上,一直等待,给用户的体验特别不好,比如向服 ...
php ajax 上拉显示更多,PHP+Ajax点击加载更多内容－这个效果好，速度快，只能点击更多加载，不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
文件异步上传使用虚拟滚动el-table-virtual-scroll加载数据
需求最近在写一个批量导入数据的功能,需要通过上传文件异步导入调接口,将后台返回Excel文件里的数据不做分页用列表展示出来,再加上需要在列表嵌入输入框,所以加载大量数据渲染的时候要加载很久,需要用到 ...
基于Android官方AsyncListUtil优化经典ListView分页加载机制（二）
基于Android官方AsyncListUtil优化经典ListView分页加载机制(二) 我写的附录文章1,介绍了如何使用Android官方的分页加载框架AsyncListUtil优化改进常见的Re ...

表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口

扼要代码示例

表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口相关推荐

最新文章

热门文章