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过于简单，加载更多数据时，没有动画过渡，界面效果过于生硬。

以后有时间再做优化吧，就这样。