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

介绍

无限滚动是网站和应用程序中的一种功能,用户向下滚动,到达当前内容页面的底部,然后下一页内容被加载并显示。

当用户需要大量数据或图像时,而不是一次时,此功能尤其有用。

在本教程中,您将构建一个例子 Vue.js 应用程序,该应用程序使用无限滚动来从随机用户 API中获取和显示数据。

前提条件

要完成本教程,您将需要:

Node.js 本地安装,您可以按照如何安装 Node.js 和创建本地开发环境进行操作。 *对设置 Vue.js 项目和使用 Vue.js 组件的一些熟悉可能是有益的.

本教程已通过 Node v15.3.0、npm v6.14.9、vue v2.6.11 和 axios v0.21.0 进行验证。

步骤1 - 设置项目

对于本教程的目的,您将从@vue/cli生成的默认Vue项目中构建。

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

这将配置一个新的Vue项目,具有默认配置:Vue 2,babel,eslint。

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

1cd vue-infinite-scrolling-example

接下来,安装axios:

1npm install [email protected]

在此时刻,你应该有一个新的Vue项目,支持Axios。

步骤2:获取初始用户数据

您可以为您的Vue应用程序使用各种无限滚动的npm包,但其中一些可能因您不需要的功能或大量依赖而过度满足您的需求。

对于本教程的目的,您将构建一个JavaScript函数,在滚动到浏览器窗口的底部时获取新的数据集。

首先,在代码编辑器中打开App.vue。

接下来,将模板中的代码替换为横跨用户系列的显示屏,以显示图像、姓名、姓名、出生日期、城市和状态:

 1[label src/App.vue]
 2<template>
 3  <div id="app">
 4    <h1>Random User</h1>
 5      <div
 6         class="user"
 7         v-for="user in users"
 8         :key="user.first"
 9      >
10      <div class="user-avatar">
11        <img :src="user.picture.large" />
12      </div>
13      <div class="user-details">
14        <h2 class="user-name">
15          {{ user.name.first }}
16          {{ user.name.last }}
17        </h2>
18        <ul>
19          <li><strong>Birthday:</strong> {{ formatDate(user.dob.date) }}</li>
20          <li><strong>Location:</strong> {{ user.location.city }}, {{ user.location.state }}</li>
21        </ul>
22      </div>
23    </div>
24  </div>
25</template>

然后,用CSS规则代替<style>中的代码来安排每个用户的显示:

 1[label src/App.vue]
 2<style>
 3.user {
 4  display: flex;
 5  background: #ccc;
 6  border-radius: 1em;
 7  margin: 1em auto;
 8}
 9
10.user-avatar {
11  padding: 1em;
12}
13
14.user-avatar img {
15  display: block;
16  width: 100%;
17  min-width: 64px;
18  height: auto;
19  border-radius: 50%;
20}
21
22.user-details {
23  padding: 1em;
24}
25
26.user-name {
27  margin: 0;
28  padding: 0;
29  font-size: 2rem;
30  font-weight: 900;
31}
32</style>

接下来,用代码代替<script>中的代码,该代码在beforeMount生命周期中向 API 发出五位用户的初始请求:

 1[label src/App.vue]
 2<script>
 3import axios from "axios";
 4
 5export default {
 6  data() {
 7    return {
 8      users: [],
 9    };
10  },
11  methods: {
12    getInitialUsers() {
13      axios.get(`https://randomuser.me/api/?results=5`).then((response) => {
14        this.users = response.data.results;
15      });
16    },
17  },
18  beforeMount() {
19    this.getInitialUsers();
20  },
21};
22</script>

出生日期 (DOB) 以 ISO 8601] 格式提供一个字符串. 为了使这个字符串更易于人读,您可以使用 Date.prototype.toDateString() 将字符串转换为日期字符串:

 1[label src/App.vue]
 2<script>
 3// ...
 4
 5export default {
 6  // ...
 7  methods: {
 8    formatDate(dateString) {
 9      let convertedDate = new Date(dateString);
10      return convertedDate.toDateString();
11    }
12    // ...
13},
14  // ...
15};
16</script>

此初始请求将在用户打开应用程序时显示5个用户。

<$>[注] **注:**此前,本教程向随机用户API执行了多个请求,以便最初加载多于单个用户结果。

在您的终端窗口中,编译和服务应用程序:

1npm run serve

在您的 Web 浏览器中打开应用程序后,将有五个随机用户显示。

步骤 3 – 实施无限滚动逻辑

无限滚动逻辑将需要检测用户到达窗口底部时。

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

当document.documentElement.scrollTop和window.innerHeight等于document.documentElement.offsetHeight,可以假定用户已到达窗口的底部。

1window.onscroll = () => {
2  let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
3
4  if (bottomOfWindow) {
5    // ...
6  }
7};

在这里,window.onscroll 会听取滚动事件,并在发现该事件时执行检查。

<$>[注] ** 注意:** 绑定事件时,特别是在滚动事件时,最好使用 debounce 事件。

然而,对于本教程的需要,不会应用退出程序 <$>

在如果条件中,让我们用Axios添加一个GET服务方法,从随机用户API中获取另一个随机用户:

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

现在,请在文本编辑器中重新参阅App.vue并添加新代码。

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

 1[label src/App.vue]
 2<script>
 3import axios from "axios";
 4
 5export default {
 6  data() {
 7    return {
 8      users: [],
 9    };
10  },
11  methods: {
12    formatDate(dateString) {
13      let convertedDate = new Date(dateString);
14      return convertedDate.toDateString();
15    },
16    getInitialUsers() {
17      axios.get(`https://randomuser.me/api/?results=5`).then((response) => {
18        this.users = response.data.results;
19      });
20    },
21    getNextUser() {
22      window.onscroll = () => {
23        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
24        if (bottomOfWindow) {
25          axios.get(`https://randomuser.me/api/`).then(response => {
26            this.users.push(response.data.results[0]);
27          });
28        }
29      }
30    }
31  },
32  beforeMount() {
33    this.getInitialUsers();
34  },
35  mounted() {
36    this.getNextUser();
37  }
38}
39</script>

现在,重组并服务您的应用程序。

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

随着每个滚动到页面的底部,您可以使用 Axios 获取新的数据,然后将这些数据推到一个数组。

结论

在本教程中,您在 Vue.js 应用程序中构建了一种无限滚动的实现,它依赖于beforeMount和mounted生命周期链接来初始化和预先将请求转化为 API。

若要懒惰地加载图像,请将图像源推到数据数组中,在模板中重复并将您的<img :src="">绑定到数组中。

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