js 實作一個簡單的無限滾動

前言：vue項目中需要實作一個清單的無限滾動，引用的ui架構沒有這個元件，就自己實作了個比較簡單的無限滾動。

無限滾動的核心在于對滾動事件的監聽，當我們監聽到滾動條距離滾動區域底部一定的距離時，即加載下一頁的資料，合并到當頁的資料中，這樣就可以實作一個簡單的無限滾動了。

步驟：1.監聽滾動條 > 2. 在監聽事件裡計算滾動條距離滾動區域底部的距離，當距離不足10像素時，則加載下一頁資料

> 3. 元件銷毀，清除監聽器

// dom挂載完成後添加滾動區域的監聽
mounted() {
    this.scrollPanel = document.querySelector('.list-content')
    this.scrollPanel.addEventListener('scroll', this.throttle(this.loadMore))
  }

// 元件銷毀時清除監聽器
destroyed() {
    this.scrollPanel.removeEventListener('scroll', this.throttle(this.loadMore))
  }

methods: {
    loadMore(e) {
      const scrollTop = e.target.scrollTop // 已滾動到可視區域上方的高度
      const clientHeight = e.target.clientHeight // 可視區域高度
      const scrollHeight = e.target.scrollHeight // 滾動内容的總高度
      if (scrollHeight - (scrollTop + clientHeight) <= 10) { // 不足10像素觸發加載更多
        this.loadData()
      }
    },
    // 這裡判斷一下目前的資料量是否已經全部加載出來了，若已經加載完成則不再加載更多
    loadData() {
      if (this.totalCount > this.data.length) {
        this.pageIndex += 1
        this.getData()
      }
    },
    // 節流函數，節省性能
    throttle(fn, interval = 500) {
      let run = true
      return function() {
        if (!run) return
        run = false
        setTimeout(() => {
          fn.apply(this, arguments)
          run = true
        }, interval)
      }
    }
}
           

這個demo相當簡單，是以也存在一些不足。比如下拉加載更多資料的前提是必須要有滾動條，沒有滾動條則無法觸發，若第一次加載的資料量正好撐滿可滾動區域，這時候就無法下拉了。可以通過調整滾動區域的高度，或者監聽onwheel（滑鼠滾輪或觸摸闆滾動）事件，在該監聽事件裡實作加載更多

object.addEventListener("wheel", myScript);
           

另一個不足之處就是由于demo過于簡單，加載更多資料時，沒有動畫過渡，界面效果過于生硬。

以後有時間再做優化吧，就這樣。