vue中h5下滑加载更多

qq_45700938

已于 2022-08-09 16:23:37 修改

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

于 2022-02-09 16:20:56 首次发布

本文链接：https://blog.csdn.net/qq_45700938/article/details/122844555

版权

本文介绍了如何在Vue组件中使用事件监听实现触底加载更多功能，同时避免在页面跳转时不必要的加载。通过`window.scroll`事件和`beforeDestroy`钩子，确保滚动监听的高效管理和资源节省。

摘要由CSDN通过智能技术生成

vue中在方法中

methods:{
// 触底加载更多
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) { // 如果滚动到接近底部，自动加载下一页
            //事件处理
            this.getMore()
      }    
    },
}
mounted() {
    // body背景颜色
    // document
    //   .querySelector("body")
    //   .setAttribute("style", "background-color:#ebebeb");
      // 触底加载更多
       window.addEventListener("scroll", this.handleScroll);
    this.getData()
  },
  beforeDestroy() {
    //document.querySelector("body").removeAttribute("style");
    window.removeEventListener("scroll", this.handleScroll，false);
  },



pc的mounted和beforeDestroy的写法 不然跳转其他页面也会加载
mounted() {
       window.addEventListener('scroll', this.handleScroll,true)
    
  },
  beforeDestroy() {
    //document.querySelector("body").removeAttribute("style");
    window.removeEventListener('scroll', this.handleScroll, true)
  },