节流下拉加载更多

湫兮如风01

于 2022-09-16 13:47:54 发布

阅读量177

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_48070278/article/details/126889016

版权

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)
  },