美文网首页
document.addEventListener('scrol

document.addEventListener('scrol

作者: 看庭前花开花落_望天上云卷云舒 | 来源:发表于2020-04-17 15:18 被阅读0次
问题:

在实现手机端分页加载问题的时候 滑动完第一页无法加载第二页,但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

相关文章