vue 实现上拉加载

最新推荐文章于 2024-04-04 18:37:30 发布

bingduYu

最新推荐文章于 2024-04-04 18:37:30 发布

阅读量1.3k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/Yugoup/article/details/106905241

版权

其实就是在 mounted添加 window.addEventListener("scroll", this.handleScroll, true);

实时获取 scrollTop，对比窗口高度，滚动条长度

data() {
    return {
      newsList:[],
      total: 0,
      pages: 0,
      pageNum: 1,
      pageSize: 15,

    };
  },
  
  methods: {
    handleScroll() {
      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight-5) {
        console.log("触底");
        let pageNum = this.pageNum;
        let length = this.newsList.length;
        if (length == this.total) {
          // 底线
        } else {
          pageNum++
          this.pageNum = pageNum;
          this.getNewsList();
        }
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  }