Vue下拉加载更新(原生简单实用)

最新推荐文章于 2024-05-12 02:54:43 发布

爱在冰川了

最新推荐文章于 2024-05-12 02:54:43 发布

阅读量301

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/T8682828/article/details/126957607

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

  mounted() {

    const _this = this;
    window.addEventListener('scroll', function () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

      //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

      //滚动条到底部的条件     console.log(scrollTop,windowHeight,scrollHeight);
     
      if (scrollTop + windowHeight+1 >= scrollHeight) {
        //到了这个就可以进行业务逻辑加载后台数据了
        // _this.footerText = '我是有底线的';
        // _this.pagination.pageIndex = _this.pagination.pageIndex + 1
        // _this.GetOwnCoursePageListPush()   数果数组是请求的，则执行请求

        //达到条件停止自动加载
        _this.txtList = [..._this.txtList, ..._this.addList]
        if (_this.txtList.length >= 60) {
          _this.addList = []     
        }
      }
    })

 
  },