zoukankan      html  css  js  c++  java
  • Vue 页面滚动事件捕捉不到,触底更新

    Vue 页面滚动事件捕捉不到,触底更新

    使用这种办法始终是没有触发

     window.addEventListener('scroll',()=>{
        console.log("2")      
     })

     

    然后找一下触发到了谁在滚动

     

    Performance ->点击录制 然后滚动你的页面 ,然后点击stop 停止录制⏺,就会生成录制的数据

     

    在Event_log 的搜索项中 搜关键字 Scroll 如果没有 重新录制一遍,选择紫色的 然后右边就找到了滚动的节点

    image.png

     

    找到这个节点 然后加上滚动事件

    image.png

    就可以抓到滚动事件了, Ye

     

    然后触底更新 就需要针对这个元素来进行判断了(我是抓 m-main 这个class 的)

     

    //获取windows的高度
    getWindowHeight() {return document.documentElement.clientHeight;}, 
    //获取已经滚动的高度
    getScrollHeight() {return Math.max(document.documentElement.getElementsByClassName("m-main")[0].scrollTop,window.pageYOffset||0)}, 
    //获取滚动dom的总高度  
    getDocumentTop() {return document.documentElement.getElementsByClassName("m-main")[0].scrollHeight},

     

    //windows高度+已经滚动的高度> 滚动dom总高度
    let isBottom = (this.getScrollHeight() +  this.getWindowHeight()) >=  this.getDocumentTop()
    if (isBottom){
        console.log("触底更新")
    }

     

     

     雨雀地址

    https://www.yuque.com/yuanminghang/ex83zv/sca6qn

     

     

     

  • 相关阅读:
    欢乐送小程序自动化探索实践
    看完这篇还不了解 Nginx,那我就哭了!
    测试人的技术栈
    Bug,项目过程中的重要数据
    什么是测试开发工程师?
    hdu 1219 AC Me
    hdu 1202 The calculation of GPA(算绩点问题)
    hdu1205吃糖果(插空法)
    hdu1201(18岁生日)
    hdu1231最大连续子序列
  • 原文地址:https://www.cnblogs.com/wlphp/p/13650880.html
Copyright © 2011-2022 走看看