问题:
在实现手机端分页加载问题的时候 滑动完第一页无法加载第二页,但pc上却没问题;
解决办法:
首先 -- document.addEventListener('scroll', this.scrollHandle, false); 里的scroll 改成 touchmove,改完后 你在手机上滑动屏幕就可以触发绑定的方法了。
其次 -- 如果改成了touchmove还是不可以 看看是不是 document.documentElement.scrollTop 这个出的问题:这个有兼容性问题在有的浏览器下会一直获取的是0 这样的话就无法触发 this.loadData(); 请求数据的这个方法 所以就无法加载第二页;
注:以上两步是我处理这个bug的关键
代码如下:
mounted(){
//scroll 在手机端不起作用
//document.addEventListener('scroll', this.scrollHandle, false);
document.addEventListener('touchmove', this.scrollHandle, false);
}
methods:{
/**
* 滚动加载下一页
*/
scrollHandle: function () {
//浏览器内容的高度
var scrollHeight = document.body.scrollHeight;
//浏览器滚动部分的高度: 这里要处理兼容性 这一步很关键
var scrollTop =
document.documentElement.scrollTop||document.body.scrollTop;
//获取屏幕的高度
var clientHeight = document.documentElement.clientHeight;
//如果 scrollTop一直是0 的话就无法执行条件调用数据的方法
if (scrollHeight - scrollTop - clientHeight <= 10 ) {
this.loadData(); //执行加载数据的方法
}
}
}
以下这篇文章 对 document.body.scrollHeight 等 兼容性解释的很好很权
https://blog.csdn.net/jack_zengzhen/article/details/79013841
网友评论