Vue 上拉加载简单实现

<template>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
// 防抖
const debounce = (fn, delay) => {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
export default {
  name: 'Test',
  data() {
    return {
      items: 20,
      handleScroll: debounce(this.onScroll, 100)
    };
  },
  methods: {
    onScroll() {
      // 可滚动容器的高度
      const innerHeight = this.$el.clientHeight
      // 可滚动容器超出当前窗口显示范围的高度
      const {clientHeight, scrollTop} = document.documentElement
      if (innerHeight <= clientHeight + scrollTop) {
        // do sth
        this.items += 10
      }
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('scroll', this.handleScroll)
    })
  }
};
</script>

<style lang="scss" scope>
li {
  line-height: 48px;
  font-size: 24px;
  font-weight: bold;
}
</style>