如何使用 Vue.js 实现无限滚动

笔记首页 >> 教程系列 >> 如何使用 Vue.js 实现无限滚动

如何使用 Vue.js 实现无限滚动

介绍

无限滚动是网站和应用程序上的一项功能，用户向下滚动并到达当前内容页面的底部，然后加载并显示下一页内容。这种效果取代了通过分页导航点击。在使用移动设备和触摸屏的情况下，无限滚动可能会提供更好的用户体验。

当您需要在用户需要时加载大量数据或图像而不是一次加载时，此功能特别有用。多年来，Twitter、Facebook 和 Instagram 等社交媒体已经普及了这一点。

在本教程中，您将构建一个示例 Vue.js 应用程序，该应用程序使用无限滚动从Random User API获取和显示数据。

先决条件

要完成本教程，您需要：

Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
熟悉设置 Vue.js 项目和使用 Vue.js 组件可能会有所帮助。

本教程已通过 Node v15.3.0、npmv6.14.9、vuev2.6.11 和axiosv0.21.0 验证。本教程经过编辑以反映从@vue/cli.

步骤 1 — 设置项目

出于本教程的目的，您将从使用@vue/cli.

npx @vue/cli create vue-infinite-scrolling-example --default

这将使用默认配置配置一个新的 Vue 项目：Vue 2, babel, eslint。

导航到新创建的项目目录：

cd vue-infinite-scrolling-example

接下来，安装axios：

npm install axios@0.21.0

此时，您应该拥有一个支持 Axios 的新 Vue 项目。

第 2 步 – 获取初始用户数据

有各种用于无限滚动的 npm 包，您可以将它们用于 Vue 应用程序。但是，由于您不需要的功能或大量依赖项，其中一些可能对您的需求来说太过分了。

就本教程而言，您将构建一个 JavaScript 函数，该函数在滚动到浏览器窗口底部时获取一组新数据。这不需要额外的插件或包。

首先，App.vue在您的代码编辑器中打开。

接下来，将中的代码替换为template循环users显示图片、名字、姓氏、出生日期、城市和州的显示：

源代码/App.vue

<template>
  <div id="app">
    <h1>Random User</h1>
      <div
         class="user"
         v-for="user in users"
         :key="user.first"
      >
      <div class="user-avatar">
        <img :src="user.picture.large" />
      </div>
      <div class="user-details">
        <h2 class="user-name">
          {{ user.name.first }}
          {{ user.name.last }}
        </h2>
        <ul>
          <li><strong>Birthday:</strong> {{ formatDate(user.dob.date) }}</li>
          <li><strong>Location:</strong> {{ user.location.city }}, {{ user.location.state }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

然后，将中的代码替换<style>为用于安排每个用户的显示的 CSS 规则：

源代码/App.vue

<style>
.user {
  display: flex;
  background: #ccc;
  border-radius: 1em;
  margin: 1em auto;
}

.user-avatar {
  padding: 1em;
}

.user-avatar img {
  display: block;
  width: 100%;
  min-width: 64px;
  height: auto;
  border-radius: 50%;
}

.user-details {
  padding: 1em;
}

.user-name {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-weight: 900;
}
</style>

接下来，将中的代码替换<script>为向 API 发出五个用户的初始请求并在beforeMount生命周期内调用的代码：

源代码/App.vue

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    getInitialUsers() {
      axios.get(`https://randomuser.me/api/?results=5`).then((response) => {
        this.users = response.data.results;
      });
    },
  },
  beforeMount() {
    this.getInitialUsers();
  },
};
</script>

出生日期 (DOB) 以ISO 8601格式的字符串形式提供。为了使这更易于阅读，您可以使用以下方法将字符串转换为日期字符串Date.prototype.toDateString()：

源代码/App.vue

<script>
// ...

export default {
  // ...
  methods: {
    formatDate(dateString) {
      let convertedDate = new Date(dateString);
      return convertedDate.toDateString();
    }
    // ...
},
  // ...
};
</script>

当用户打开应用程序时，此初始请求将显示五个用户。

注意：以前，本教程对随机用户 API 执行了多个请求，以初始加载多个用户结果。此部分已被重写以使用resultsAPI 提供的新参数。

在终端窗口中，编译并提供应用程序：

npm run serve

在您的网络浏览器中打开应用程序后，将随机显示五个用户。

第 3 步 – 实现无限滚动逻辑

无限滚动逻辑需要检测用户何时到达窗口底部。这可以通过以下三个属性来完成：

document.documentElement.offsetHeight：文档元素整个高度的像素数量。
document.documentElement.scrollTop：从文档元素顶部定位的当前像素量。
window.innerHeight：屏幕高度的像素数。

当document.documentElement.scrollToppluswindow.innerHeight等于时document.documentElement.offsetHeight，可以假设用户已经到达窗口底部。

window.onscroll = () => {
  let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

  if (bottomOfWindow) {
    // ...
  }
};

在这里，window.onscroll侦听scroll事件并在检测到事件时执行检查。

注意：绑定事件时，尤其是滚动事件时，最好对事件进行去抖动。去抖动是指您仅在自上次调用后经过指定的时间后才运行该函数。

但是，为了本教程的需要，不会应用去抖动器。

在if条件内部，让我们GET使用 Axios添加一个服务方法，以从 Random User API 中获取另一个随机用户：

axios.get(`https://randomuser.me/api/`).then(response => {
  this.users.push(response.data.results[0]);
});

现在，App.vue在文本编辑器中重新访问并添加新代码。

在您的组件的中methods，您需要创建一个新函数，getNextUser()并将其加载到mounted()生命周期方法中。

源代码/App.vue

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    formatDate(dateString) {
      let convertedDate = new Date(dateString);
      return convertedDate.toDateString();
    },
    getInitialUsers() {
      axios.get(`https://randomuser.me/api/?results=5`).then((response) => {
        this.users = response.data.results;
      });
    },
    getNextUser() {
      window.onscroll = () => {
        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
        if (bottomOfWindow) {
          axios.get(`https://randomuser.me/api/`).then(response => {
            this.users.push(response.data.results[0]);
          });
        }
      }
    }
  },
  beforeMount() {
    this.getInitialUsers();
  },
  mounted() {
    this.getNextUser();
  }
}
</script>

现在，重新编译并提供您的应用程序。

在 Web 浏览器中打开应用程序并滚动到页面底部后，一个新用户将添加到页面中。

每次滚动到页面底部时，您都可以使用 Axios 获取新数据，然后将该数据推送到一个数组中。

结论

在本教程中，您在 Vue.js 应用程序中构建了一个无限滚动的实现。它依靠的beforeMount和mounted生命周期挂钩，初始化和预取的请求的API。

要延迟加载图像，请将图像源推送到数据数组，在您的数据数组中遍历它template并将您的数据绑定<img :src="">到数组。

如果您想了解有关 Vue.js 的更多信息，请查看我们的 Vue.js 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧！