页面加载后立即触发Nuxt.js无限加载

Nuxt.js是一个基于Vue.js的通用应用框架，它可以帮助我们快速构建服务器渲染的Vue.js应用程序。在Nuxt.js中，无限加载（Infinite Loading）是一种常见的需求，它允许在页面滚动到底部时自动加载更多的数据，以实现无限滚动的效果。

实现Nuxt.js的无限加载可以通过以下步骤：

首先，确保你已经安装了Nuxt.js并创建了一个基本的Nuxt.js项目。
在页面组件中，你可以使用Vue.js的生命周期钩子函数mounted来监听页面加载完成的事件。在mounted函数中，你可以执行一些初始化操作，并注册滚动事件监听器。
在滚动事件监听器中，你可以通过判断页面滚动的位置和页面的高度来确定是否触发无限加载。当页面滚动到底部时，你可以执行加载更多数据的操作。
加载更多数据的方式可以根据具体需求来决定，可以通过发送异步请求获取数据，也可以通过调用某个方法来生成新的数据。
在获取到新的数据后，你可以将数据添加到已有的数据列表中，以实现数据的无限追加。

下面是一个简单的示例代码，演示了如何在Nuxt.js中实现无限加载：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 存储数据的数组
      page: 1, // 当前页数
      isLoading: false // 是否正在加载数据
    };
  },
  mounted() {
    this.loadMoreData(); // 初始化加载数据
    window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
  },
  methods: {
    handleScroll() {
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

      if (documentHeight - (windowHeight + scrollTop) < 100 && !this.isLoading) {
        this.loadMoreData();
      }
    },
    async loadMoreData() {
      this.isLoading = true;

      // 发送异步请求或生成新的数据
      const newData = await this.fetchData();

      // 将新的数据追加到已有的数据列表中
      this.items = [...this.items, ...newData];

      this.isLoading = false;
      this.page++;
    },
    fetchData() {
      // 发送异步请求或生成新的数据的逻辑
      // 返回一个Promise对象
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll); // 移除滚动事件监听器
  }
};
</script>

在这个示例中，我们通过监听滚动事件来判断是否触发无限加载。当页面滚动到距离底部100像素以内时，会调用loadMoreData方法来加载更多数据。在loadMoreData方法中，我们可以发送异步请求或生成新的数据，并将新的数据追加到已有的数据列表中。

需要注意的是，这只是一个简单的示例，实际应用中可能需要考虑更多的细节，比如数据加载完成后的提示、错误处理等。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。