译文:https://alligator.io/vuejs/implementing-infinite-scroll/
无限滚动在网络上占有一席之地,但它不适用于每个网站或应用程序。当用户需要加载大量数据或图像时,但又不想一次性加载完所有数据和图像时,它们特别有用。 Twitter,Facebook和Instagram等社交媒体多年来一直在推广。在您的网站或应用程序中集成自己的无限滚动比您想象的要容易。
本文将使用 Random User API(模拟后端返回数据)。该API将自己形容为“像Lorem Ipsum,但是对于人”。它不仅适用于此实现,而且对于模仿未来项目的用户配置文件也非常有用。
在你开始前,用 Vue CLI webpack-simple
项目模板创建一个新的 Vue.js 项目。此例子将分别用 Axios 和MomentJS 来获取数据和日期格式。
$ vue init webpack-simple infinite-scroll-vuejs
获取初始用户数据
有各种实现无限滚动的 npm 包,你可以使用你的 Vue 应用程序,但其中一些可能是太繁琐了。此文中,我们将不用那些插件或包,仅仅编写一个简单的 JavaScript 函数来实现无限滚动功能(当滚动到浏览器窗口底部时,获取一组新数据)。
在我们开始集成无限滚动之前,让我们在页面加载中获取并设置一些初始数据:
App.vue
data () {
return {
persons: []
}
},
methods: {
getInitialUsers () {
for (var i = 0; i < 5; i++) {
axios.get(`https://randomuser.me/api/`)
.then(response => {
this.persons.push(response.data.results[0]);
});
}
}
},
beforeMount() {
this.getInitialUsers();
}
注意:
Random User API 一次只会返回一个随机用户数据,为了获得5个用户数据,需要发起五次请求。
如果您在 console 看到了五个用户数据,那就OK了!让我们通过模板中的这些数据进行迭代,然后继续:
App.vue
<template>
<div id="app">
<h1>Random User</h1>
<div class="person" v-for="person in persons">
<div class="left">
<img :src="person.picture.large">
</div>
<div class="right">
<p>{{ person.name.first }} {{ person.name.last }}</p>
<ul>
<li>
<strong>Birthday:</strong> {{ formatDate(person.dob) }}
</li>
<li class="text-capitalize">
<strong>Location:</strong> {{ person.location.city }},
{{ person.location.state }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
...
</script>
<style lang="scss">
/* Optional Styles */
.person {
background: #ccc;
border-radius: 2px;
width: 20%;
margin: 0 auto 15px auto;
padding: 15px;
img {
width: 100%;
height: auto;
border-radius: 2px;
}
p:first-child {
text-transform: capitalize;
font-size: 2rem;
font-weight: 900;
}
.text-capitalize {
text-transform: capitalize;
}
}
</style>
实现无限滚动逻辑
现在你在此的目的......无限的滚动! 在组件的方法中,您需要创建一个名为scroll()
的新函数,并将其加载到mounted()
生命周期方法中。
这个scroll()
方法应该有一个简单的条件来计算页面的底部,判断它为true或false,并执行一些操作。我们将利用文档对象的documentElement.scrollTop
,documentElement.offsetHeight
属性和窗口的innerHeight
属性来确定是否滚动到底部:
window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
if (bottomOfWindow) {
// Do something, anything!
}
};
在这种情况下,让我们添加一个GET方法,使用Axios从随机用户API中获取另一个随机用户。
methods: {
...,
scroll (person) {
window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
if (bottomOfWindow) {
axios.get(`https://randomuser.me/api/`)
.then(response => {
person.push(response.data.results[0]);
});
}
};
},
},
mounted() {
this.scroll(this.person);
}
此功能只会在用户滚动到页面底部时发起服务请求,并向人员数组添加一个新的随机“用户”。此时,您应该可以无限滚动...并每次看到新的“用户”。
结尾
无限滚动听起来吓人,但如所证明的那样,它非常简单。每次滚动到页面的底部时,我们都会使用 Axios 获取新数据,然后将这些数据推送到数组中。要延迟加载图像,只需将图像源推送到数据数组,在模板中遍历它,然后将<img:src ="">
绑定到数组。
ps: 此文核心就在【判断是否滚动到页面底部的逻辑上】,在此提供一个兼容性更好的写法,参考此文滚动到底部加载更多。
网友评论