不管是Vue还是H5 下拉的加载的原理就是监听页面滚动触底
** Vue中监听触底的逻辑 **
methods:{
created() {
let _this = this;
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
var windowHeight =
document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
var scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
console.log(h)
if (scrollTop + windowHeight == scrollHeight) {
console.log(
"距顶部" +
scrollTop +
"可视区高度" +
windowHeight +
"滚动条总高度" +
scrollHeight
);
// 下面就是需要你完成的事情
// 比如说: 写后台加载数据的函数 _this.onLoad();
// 比如说: 触底提示或者警告
}
}
}