Vue下滚动到页面底部无限加载数据的示例代码
|
看到一篇Implementing an Infinite Scroll with Vue.js ,觉得挺实用的就看了下,顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解,何时开始axios请求,如何结合Vue使用原生js来写scroll事件等等,我这里主要是对原文的重点提取和补充 本文技术要点
创建项目首先创建一个简单的vue项目 然后安装项目所需要用的一些插件 初始化用户数据项目搭建完后,跑起来看看 打开http://localhost:8080无误后,我们开始修改代码,先看看获取用户数据这块,
import axios from 'axios'
import moment from 'moment'
export default {
name: 'app',// 创建一个存放用户数据的数组
data() {
return {
persons: []
}
},methods: {
// axios请求接口获取数据
getInitialUsers() {
for (var i = 0; i < 5; i++) {
axios.get(`https://randomuser.me/api/`).then(response => {
this.persons.push(response.data.results[0])
})
}
},formatDate(date) {
if (date) {
return moment(String(date)).format('MM/DD/YYYY')
}
},beforeMount() {
// 在页面挂载前就发起请求
this.getInitialUsers()
}
}
这里原作者也专门提醒,完全没有必要也不建议在加载页面的时候请求5次,只是这个接口一次只能返回1条数据,仅用于测试才这样做的. 当然我这里也可以通过Mock来模拟数据,就不详细说了~ 接下来来写模板结构和样式,如下: Random User
{{ person.name.first}} {{ person.name.last }}
Location: {{ person.location.city}},{{ person.location.state }}
<style lang="scss"> img { p:first-child { .text-capitalize { 这样页面就能显示5个人的个人信息了. 处理无限滚动加载逻辑我们接下来需要在methods里面添加scroll()来监听滚动,并且这个事件是应该在mounted()这个生命周期内的. 代码如下:
// ...
methods: {
// ...
scroll(person) {
let isLoading = false
window.onscroll = () => {
// 距离底部200px时加载一次
let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
if (bottomOfWindow && isLoading == false) {
isLoading = true
axios.get(`https://randomuser.me/api/`).then(response => {
person.push(response.data.results[0])
isLoading = false
})
}
}
}
},mounted() {
this.scroll(this.persons)
}
}
这段代码原文是有一点拼写错误的. 我这里修正了,另外增加了距离底部即开始加载数据,并进行截流. 保存好,回到浏览器,查看效果,已经没有问题了~ 总结滚动到页面底部无限加载的功能在Vue上实现其实和普通的页面开发差不多,每次滚动加载未完成的情况下不会触发请求下一次,每次请求push到数组内,通过 最后,我把这个也弄了一份在GitHub上面,有需要的可以看看infinite-scroll-vuejs-demo~ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
