vue3实现容器内容滚动到底,触底加载新数据教程

<template>
  <div class="container" ref="container" @scroll="handleScroll">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
      <li v-if="loading">Loading...</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const containerRef = ref(null)
    const items = ref([])
    const loading = ref(false)
    const page = ref(1)

    const handleScroll = () => {
      const container = containerRef.value
      if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
        loadMore()
        console.log('到底了');
      }
    }

    const loadMore = () => {
      if (loading.value) return
      loading.value = true
      // 发送请求加载新数据
      fetchData(page.value)
        .then(newData => {
          items.value = [...items.value, ...newData]
          loading.value = false
          page.value++
        })
    }

    onMounted(() => {
      // 初始化加载数据
      loadMore()
    })

    return {
      containerRef,
      items,
      loading,
      handleScroll
    }
  }
}
</script>

npm install vue-infinite-loading

import InfiniteLoading from 'vue-infinite-loading';

<template>
  <div class="container" ref="container">
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    <infinite-loading @infinite="loadMore" />
  </div>
</template>

import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      page: 1, // 当前页码
      limit: 10, // 每页数据量
    };
  },
  methods: {
    async loadMore($state) {
      const res = await axios.get(`/api/data?page=${this.page}&limit=${this.limit}`);
      this.items.push(...res.data);
      this.page++;
      $state.loaded(); // 通知插件已加载完成
    },
  },
  mounted() {
    // 监听滚动事件，当滚动到底部时触发加载更多数据
    this.$refs.container.addEventListener('scroll', () => {
      if (this.$refs.container.scrollTop + this.$refs.container.clientHeight === this.$refs.container.scrollHeight) {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:infinite');
      }
    });
  },
};