收藏总有用武之地
当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验，又不想做分页，这时候就很适合懒加载了。
看前先点赞，养成好习惯哈哈哈
在了解它的原理前，需要分清楚三个属性：
scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位
scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。
clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小，实际上就是可视区域的大小。.
如何判断滚动条滚到底部了呢:scrollHeight - scrollTop - clientHeight = 0
懒加载
handleScroll(event) {
//标准浏览器中：定义一个形参event，但当事件触发的时候，并没有给event赋实际的值，则浏览器会把”事件“的对象赋给这个形参e，这时这个e是个系统级的对象：事件；
const scrollDistance =
// 正文全文高
event.target.scrollHeight -
// 被卷去的高
event.target.scrollTop -
// 可见区域的宽度
event.target.clientHeight;
// 滚动条距离底部小于等于0证明已经到底了，可以请求接口了
if (scrollDistance <= 0 ) {
//这个开关是为了避免请求数据中 再次被请求
if (this.onOff) return;
this.onOff = true;
// 当前页数和总页数在第一次请求数据就要保存起来
let pageNum = this.pageNum;
//当前页数小于总页数 就请求
if (pageNum < this.pages) {
pageNum += 1;
let data = { pageNumber: pageNum, pageSize: 10 };
//开始请求数据
enquiryAllList(data).then(res => {
this.onOff = false;
this.pageNum = res.result.pageNum;
this.tableData = this.tableData.concat(res.result.list);
});
}
}
},
如果没做防抖或者标记的话，在请求也比较慢就可能出问题
节流函数
这里有参考大佬的防抖与节流的博客性能优化之防抖和节流
throttle(fn, wait) {
let context, args;
let previous = 0;
return function() {
let now = +new Date();
context = this;
args = arguments; // 取throttle执行作用域的this
if (now - previous > wait) {
fn.apply(context, args); // 用apply指向调用throttle的对象，相当于throttle.fn(args);
previous = now;
}
};
懒加载Plus节流版
handleScroll(event) {
//标准浏览器中：定义一个形参event，但当事件触发的时候，并没有给event赋实际的值，则浏览器会把”事件“的对象赋给这个形参e，这时这个e是个系统级的对象：事件；
const scrollDistance =
// 正文全文高
event.target.scrollHeight -
// 被卷去的高
event.target.scrollTop -
// 可见区域的宽度
event.target.clientHeight;
// 滚动条距离底部小于等于0证明已经到底了，可以请求接口了
if (scrollDistance < = 0 ) {
//这个开关是为了避免请求数据中 再次被请求
if (this.onOff) return;
this.onOff = true;
// 当前页数和总页数在第一次请求数据就要保存起来
let pageNum = this.pageNum;
//当前页数小于总页数 就请求
if (pageNum < this.pages) {
pageNum += 1;
let data = { pageNumber: pageNum, pageSize: 10 };
enquiryAllList(data).then(res => {
this.onOff = false;
this.pageNum = res.result.pageNum;
this.tableData = this.tableData.concat(res.result.list);
});
}
},
// 节流
throttle(fn, wait) {
let context, args;
let previous = 0;
return function() {
let now = +new Date();
context = this;
args = arguments; // 取throttle执行作用域的this
if (now - previous > wait) {
fn.apply(context, args); // 用apply指向调用throttle的对象，相当于throttle.fn(args);
previous = now;
}
};
},
关于调用
如果不封装 直接调用的话，每次调用都会创建一个新的(匿名)函数 请参考MDN
throttleFun(event) {
this.throttle(this.handleScroll(event), 1000);
}
然后在mounted函数中
window.addEventListener("scroll", this.throttleFun, true);
最后
来自平时的工作记录
挺实用的方法，快点赞收藏起来方便下次用！
在评论区留下您宝贵的建议~
