vue 中監測滾動條加載數據（懶加載數據）

vue 中監測滾動條加載數據（懶加載數據）

1：鈎子函數監聽滾動事件：

  mounted () {
    this.$nextTick(function () {
      window.addEventListener('scroll', this.onScroll)
    })
  },

 

2：

 methods: {
    // 獲取滾動條當前的位置
    getScrollTop () {
      var scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }
      return scrollTop
    },
    // 獲取當前可視范圍的高度
    getClientHeight () {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
      } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
      }
      return clientHeight
    },

    // 獲取文檔完整的高度
    getScrollHeight () {
      return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
    },
    // 滾動事件觸發下拉加載
    onScroll () {
      if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 0) {
        if (this.status === 1) {
          this.status = 0
          // 頁碼，分頁用，默認第一頁
          this.deliverParams.page += 1
          // 調用請求函數
          alert('觸發！！！')
        }
      }
    },
}