在vue当中写一个触底加载

在 Vue 中实现触底加载可以通过监听滚动事件，当滚动到页面底部时触发加载更多的操作。下面是一个简单的实现：

首先在模板中添加一个滚动容器及一个列表，代码如下：

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

然后在 `data` 中定义需要加载的数据、当前页数和每页的条数等相关数据：

<script>
export default {
  data() {
    return {
      items: [], // 需要加载的数据
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页的条数
      total: 0 // 数据总数
    };
  },
  methods: {
    // 加载更多数据
    loadMore() {
      // 模拟异步加载数据
      setTimeout(() => {
        for (let i = 0; i < this.pageSize; i++) {
          this.items.push({
            id: this.total + i + 1,
            text: `item ${this.total + i + 1}`
          });
        }
        this.total += this.pageSize;
        this.currentPage++;
      }, 1000);
    },
    // 监听滚动事件
    handleScroll() {
      const scrollContainer = this.$refs.scrollContainer;
      const scrollHeight = scrollContainer.scrollHeight;
      const scrollTop = scrollContainer.scrollTop;
      const clientHeight = scrollContainer.clientHeight;
      if (scrollHeight - scrollTop === clientHeight) {
        this.loadMore();
      }
    }
  }
};
</script>

在 `handleScroll` 方法中，判断当前滚动容器的滚动高度和可视区域的高度是否相等，如果相等则触发加载更多的操作。

最后需要注意的是，为了确保第一次进入页面时也能触发加载操作，需要在 `mounted` 钩子函数中手动触发一次 `loadMore` 方法：

mounted() {
  this.loadMore();
}