今天遇到一个需求，就是要实现表格的滚动加载。
通常我们经常实现的效果是：下图中带分页的表格
vue——antd+elementUi——table表格实现滚动加载_分页滚动加载
效果图1.添加自定义滚动加载指令文件1.1 在`utils`文件夹中创建 `loadMore.js`1.2 添加如下代码：1.3 在`main.js`中添加以下代码1.4 页面中的使用方式
效果图
如果要实现滚动分页加载的话，则需要保证的一点就是数据量不能过大，过多的数据量会导致页面的卡顿。
下面来介绍滚动分页加载的实现方式：
vue table实现滚动加载:http://t.csdn.cn/alzLo
1.添加自定义滚动加载指令文件
1.1 在utils文件夹中创建 loadMore.js
1.2 添加如下代码：
/**
* 加载更多数据的指令
*/
export default {
install(Vue) {
Vue.mixin({
directives: {
loadmore: {
bind(el, binding) {
let bindTime;
clearTimeout(bindTime)
bindTime = window.setTimeout(function () {
let selectWrap = el.querySelector(".ant-table-body");
if (!selectWrap) selectWrap = el.querySelector(".el-table__body-wrapper");
var lastScrollTop = 0;
selectWrap.addEventListener("scroll", function () {
let offsetValue = 20;
if(this.scrollTop == 0) {
binding.value('up', this);
return false;
}
if (lastScrollTop != this.scrollTop) {
lastScrollTop = this.scrollTop;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
if (scrollDistance <= offsetValue) {
binding.value('down', this);
}
}
}, false);
}, 200);
}
}
}
});
}
};
1.3 在main.js中添加以下代码
//加载更多数据的指令
import loadMore from './utils/loadMore';
Vue.use(loadMore);
1.4 页面中的使用方式
:loading="listLoading" :data-source="listDatas" :columns="columns" :scroll="{ x: 1000, y: 460 }" :pagination="false"//将分页的参数改为false，即不显示分页组件 bordered v-loadmore="getList"//添加加载更多的指令 @change="changeTable" style="width: 100%" > xxxx getList方法如下： getList(a) { if (this.pagination.total == this.listDatas.length) { return;//当页面数据已经加载完全时，不再请求数据 } if (a == 'up') { return;//表示是：页面向上滚动的时候不进行接口数据的请求 } this.listLoading = true; let params = { ...this.pagination, ...this.listQuery, }; getList(params) .then((response) => { if (response.code == 1) { this.listDatas = this.listDatas.concat(response.data.items);//做数据的拼接 // this.listDatas = response.data.items || []; const pagination = { ...this.pagination }; pagination.total = response.data?.totalCount; this.pagination = pagination; this.pagination.current++;//准备下次向下滚动的时候加载下一页的数据 } else { this.$message.error(`${response.msg} ${',' + response.data}`); } }) .catch((err) => { // this.$message.error('数据获取失败'); }) .finally(() => { this.listLoading = false; }); 另外其它的操作也需要做相应的处理， 比如点击查询按钮时，需要先将listDatas数据清空。 完成！！！多多积累，多多收获！ 下面的内容仅为了凑字数，可忽略！！！ 随着 Web 应用越来越复杂，我们经常需要在页面上展示大量的图片或列表。如果一次性加载所有的内容，会极大地影响页面的加载速度和用户体验。在这种情况下，滚动加载就成了一种非常流行的方式。 滚动加载，也叫无限滚动，指的是在用户滚动页面的过程中，通过 AJAX 技术，实时请求后续数据。这种技术在 Facebook、Twitter、Instagram 等社交媒体网站中广泛应用，以实现高效体验。 在 Vue.js 中，实现滚动加载的方式通常有两种，一种是自己写代码实现，另一种是使用第三方插件。 使用第三方插件实现滚动加载 除了自己写代码实现滚动加载外，我们还可以使用一些第三方插件来实现滚动加载。这里我们介绍一下比较常用的两个插件，分别是 vue-infinite-scroll 和 vue-virtual-scroll-list。 vue-infinite-scroll 插件 vue-infinite-scroll 是一款基于 Vue.js 实现的无限滚动插件，它能够帮助我们实现滚动加载列表、图片等场景。使用这个插件非常简单，只需要在需要实现滚动加载的组件中，添加 v-infinite-scroll 指令，然后指定需要触发滚动加载的方法即可。 vue-virtual-scroll-list 插件 vue-virtual-scroll-list 是一款基于 Vue.js 实现的虚拟滚动插件，能够帮助我们快速实现大数据量的列表滚动，提高页面性能和用户体验。与传统的滚动加载不同的是，vue-virtual-scroll-list 采用了虚拟滚动技术，只渲染当前可见区域内的数据项，从而避免了大量的 DOM 渲染和重排，提高了页面的效率和流畅度。 通过以上介绍，我们可以发现，Vue.js 中实现滚动加载图片或列表有多种方式。自己写代码实现虽然灵活，但是代码较多，需要花费一定的时间和精力；而使用第三方插件虽然简单，但需要深入了解插件的原理和使用方法，才能更好地进行业务开发。因此，在实现滚动加载时，需要根据具体业务场景和自己的实力来选择适合自己的方式。 精彩链接
您阅读本篇文章共花了：
发表评论