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

scroll方式实现 

在Vue3中，可以使用ref和onMounted钩子函数获取容器元素并监听滚动事件，判断内容是否滚动到了底部，从而触发加载新数据。

以下是一个简单的示例代码：

<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>

在上面的示例中，containerRef使用ref获取了容器元素，items使用ref定义了列表数据，loading表示是否正在加载新数据，page表示当前页码数。

handleScroll函数是滚动事件的处理函数，首先获取容器元素，然后通过判断scrollTop和clientHeight是否等于scrollHeight来判断内容是否滚动到了底部，如果是则触发loadMore加载新数据。

loadMore函数首先判断是否正在加载数据，如果是则直接返回，否则设置loading为true，然后发送请求加载新数据，将新数据和旧数据拼接起来，更新items，将loading设置为false，增加page的值。

最后，在onMounted钩子函数中初始化加载数据。

---

组件方式

可以使用vue-infinite-loading插件来实现容器内容滚动到底部时自动加载新数据。

步骤如下：

安装vue-infinite-loading插件，并将其引入到你的Vue项目中。

npm install vue-infinite-loading

import InfiniteLoading from 'vue-infinite-loading';

在需要实现滚动加载的容器内添加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>

在容器所在的组件中添加loadMore方法，用于加载新数据。

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');
      }
    });
  },
};

通过以上步骤，就可以实现容器内容滚动到底部时自动加载新数据了。当数据加载完成后，需要手动通知插件已完成加载，即调用$state.loaded()方法。