AI生成--Vue实现滚动加载

最新推荐文章于 2025-02-06 00:36:10 发布

我兔威武

最新推荐文章于 2025-02-06 00:36:10 发布

阅读量380

点赞数

分类专栏： AI生成文章标签： vue.js javascript 前端 AI生成

本文链接：https://blog.youkuaiyun.com/weixin_40589472/article/details/131578798

版权

文章介绍了两种在Vue中实现无限滚动加载数据的方法：一是使用watch属性监听DOM元素的滚动事件，当滚动到底部时触发加载更多数据；二是利用v-infinite-scroll自定义指令，配合vue-infinite-scroll插件来自动处理滚动加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Vue的watch属性监听dom元素的滚动事件，当滚动到底部时，触发加载更多数据的方法。

<template>
  <div class="container" ref="scrollContainer" @scroll="handleScroll">
    <div v-for="item in items">{
    { item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false,
    };
  },
  mounted() {
    this.getItems();
  },
  methods: {
    getItems() {
      this.isLoading = true;
      // 发送请求获取数据，此处省略
      // 假设请求成功后将数据push进items数组中
      this.items.push(...data);
      this.isLoading = false;
    },
    handleScroll() {
      const scrollContainer = this.$refs.scrollContainer;
      const distanceToBottom =
        scrollContainer.scrollHeight - (scrollContainer.scrollTop + scrollContainer.clientHeight);
      if (distanceToBottom < 10 && !this.isLoading) {
        this.pa