vue实现滚动翻页

vue实现滚动翻页的方法

监听滚动事件 在Vue组件中，通过@scroll或window.addEventListener监听滚动事件，判断是否滚动到底部。使用clientHeight、scrollTop和scrollHeight计算滚动位置。

methods: {
  handleScroll() {
    const scrollPosition = window.innerHeight + window.scrollY;
    const pageHeight = document.documentElement.scrollHeight;
    if (scrollPosition >= pageHeight - 100) {
      this.loadMore();
    }
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
}

加载更多数据 当滚动到底部时，触发数据加载方法。通常需要配合分页参数（如page和pageSize）从后端API获取数据。

data() {
  return {
    page: 1,
    pageSize: 10,
    list: [],
    isLoading: false,
    hasMore: true
  };
},
methods: {
  async loadMore() {
    if (this.isLoading || !this.hasMore) return;
    this.isLoading = true;
    try {
      const res = await fetchData(this.page, this.pageSize);
      this.list = [...this.list, ...res.data];
      this.hasMore = res.hasMore;
      this.page++;
    } finally {
      this.isLoading = false;
    }
  }
}

使用第三方库 可以使用vue-infinite-scroll等库简化实现。安装后直接在元素上添加指令即可。

import infiniteScroll from 'vue-infinite-scroll';
Vue.use(infiniteScroll);

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="isLoading">
  <!-- 列表内容 -->
</div>

优化性能 为避免频繁触发滚动事件，使用防抖（debounce）或节流（throttle）技术控制触发频率。

import { debounce } from 'lodash';
methods: {
  handleScroll: debounce(function() {
    // 滚动逻辑
  }, 200)
}

注意事项

• 确保在组件销毁时移除事件监听，避免内存泄漏。
• 处理加载状态和没有更多数据的情况，提升用户体验。
• 移动端可能需要额外处理触摸事件和滚动行为。