实现
首先要实时监听页面滚动,这里在mounted里给浏览器加入一个touchmove事件,给这个事件一个方法loading,方便调用它
首先我data里面的数据
data() {
return {
kwgArr: [],
total: 0, //总数据量
pageSize: 10, //每页10条数据
current: 1, //当前页
loadTxt: "",
};
mounted() {
window.addEventListener("touchmove", this.loading, true);
},
离开页面的时候销毁
destroyed() {
window.removeEventListener("touchmove", this.loading, true);
},
在loading里首先获取到关键属性的值,对比高度即可。在触底时获取当前页数和当前列表数组的长度
ps:这里要使用个延时加载,不然滑动屏幕的时候会不断触发方法,去计算高度,浪费性能
loading() {
let that = this;
clearTimeout(that.timer);
that.timer = setTimeout(() => {
console.log("加载数据");
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight =
document.documentElement.scrollHeight-100 || document.body.scrollHeight-100;
//获取到关键属性的值后,判断即可
if (scrollTop + windowHeight >= scrollHeight) {
console.log("触底");
// this.loadTxt = "玩命加载中~";
//在触底时获取当前页数和当前列表数组的长度
let page = this.current;
let length = this.kwgArr.length;
//对比当前列表长度和列表总数,如果相等,说明没有数据了,否则页数加一,再次调获取列表接口
if (length == this.total) {
this.loadTxt = "我也是有底线的~";
// 我也是有底线的
} else {
page++;
this.current = page;
this.loadKnowledge();
}
}
}, 50);
},
这里获取列表接口需要一些操作,判断是第一次调接口还是触底调接口
// 知识库主页分页
loadKnowledge() {
let param = {
page: this.current,
size: this.pageSize,
// labelRef: labelId,
};
if (this.$route.query.labelId) {
param["labelRef"] = this.$route.query.labelId;
}
if (this.title != null && this.title.trim() != "") {
param["title"] = this.title;
}
this.$API.knowledgePage(param).then((data) => {
var newList = [];
if (this.current == 1) {
newList = data.data;
} else {
newList = this.kwgArr.concat(data.data);
}
this.total = parseInt(data.total) || 0;
this.kwgArr = newList;
});
},
在这里大家可以看到,为什么scrollHeight 要减100,这是针对华为手机自带的浏览器做的处理,因为如果不减100的话,对于华为手机自带的浏览器,窗口的高度 + 元素超出上边界的高度 永远不会大于元素高度,所以这里减掉100,这样就解决了这个问题,至于为什么华为手机自带的浏览器会有这个问题,我暂时也不清楚
let scrollHeight = document.documentElement.scrollHeight-100 || document.body.scrollHeight-100;