【JS】页面滚动加载数据

效果类似滚动到某个高度就加载下一页的数据
​​
html代码

<duties-card-list class="wrap" id="btn" :dataList="dataList" @getList="getList(1)">
</duties-card-list> 
<!-- 需要加上id=“btn”，方便后面获取元素高度 -->

js代码

  mounted() {
    // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    window.addEventListener('scroll', this.handleScroll, true)
  },
  // 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods(){
    //滚动事件-触底
    handleScroll() {
      //1.获取滚动区域元素
      let btn = document.getElementById('btn')
      if (btn) {
        //2.获取元素高度
        let height = btn.offsetHeight
        //3.获取滚动区域到头部的距离
        let top = btn.scrollTop || document.documentElement.scrollTop
        //4.获取滚动条高度
        let scrollHeight = btn.scrollHeight
        //5.滚动条到底部的条件
        if (top + height == scrollHeight) {
          // 滚动区域到头部的距离 + 屏幕高度 = 可滚动的总高度 //触底时自动加载
          this.loadMore()
        }
      }
    },
    //滚动刷新
    loadMore() {
      //Math.ceil()向上取整，小数部分直接舍去，并向正数部分进1
      if (Math.ceil(this.page.total / this.page.pageSize) > this.page.currentPage) {
        this.page.currentPage++ 
        this.getList()
      }
    },
  }

PS：如有错误，欢迎指正~