Vue下滚动到页面底部无限加载数据的示例代码下滚动到页面底部无限加载数据的示例代码
本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码，小编觉得挺不错的，现在分享给大家，也
给大家做个参考。一起跟随小编过来看看吧
看到一篇Implementing an Infinite Scroll with Vue.js , 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.
从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要
是对原文的重点提取和补充
本文技术要点本文技术要点
1. Vue生命周期
2. axios简单用法
3. moment.js格式化日期
4. 图片懒加载
5. 结合原生js来写scroll事件
6. 请求节流
创建项目创建项目
首先创建一个简单的vue项目
# vue init webpack-simple infinite-scroll-vuejs
然后安装项目所需要用的一些插件
# npm install axios moment
初始化用户数据初始化用户数据
项目搭建完后, 跑起来看看
# npm run dev
打开http://localhost:8080无误后, 我们开始修改代码, 先看看获取用户数据这块,
<script>
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()
}
}
</script>
这里原作者也专门提醒, 完全没有必要也不建议在加载页面的时候请求5次, 只是这个接口一次只能返回1条数据, 仅用于测试才
这样做的. 当然我这里也可以通过Mock来模拟数据, 就不详细说了~
接下来来写模板结构和样式, 如下:
<template>
评论0