美文网首页
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

    相关文章

      网友评论

          本文标题:document.addEventListener('scrol

          本文链接:https://www.haomeiwen.com/subject/bfcyvhtx.html