当前位置：首页 > VUE

vue指令实现滚动加载

2026-02-24 13:26:04VUE

Vue 指令实现滚动加载的方法

自定义指令实现滚动加载

创建一个自定义指令 v-scroll-load，监听滚动事件并在接近底部时触发加载函数。

vue指令实现滚动加载

Vue.directive('scroll-load', {
  inserted(el, binding) {
    const callback = binding.value;
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          callback();
        }
      });
    }, options);

    observer.observe(el);
  }
});

使用方法

在模板中使用自定义指令，绑定加载函数。

vue指令实现滚动加载

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-scroll-load="loadMore"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1
    };
  },
  methods: {
    loadMore() {
      fetch(`/api/items?page=${this.page}`)
        .then(response => response.json())
        .then(data => {
          this.items = [...this.items, ...data];
          this.page++;
        });
    }
  }
};
</script>

使用 IntersectionObserver API

IntersectionObserver API 是现代浏览器提供的原生 API，性能优于传统的滚动事件监听。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMore();
    }
  });
}, { threshold: 0.1 });

observer.observe(document.querySelector('.load-more-trigger'));

传统滚动事件监听

如果不支持 IntersectionObserver，可以使用传统滚动事件监听。

window.addEventListener('scroll', () => {
  const scrollPosition = window.innerHeight + window.scrollY;
  const documentHeight = document.body.offsetHeight;
  if (scrollPosition >= documentHeight - 100) {
    loadMore();
  }
});