这次给大家带来Vue下拉至页面底部立刻加载数据，Vue下拉至页面底部立刻加载数据的注意事项有哪些，下面就是实战案例，一起来看一下。
从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充
本文技术要点
Vue生命周期
axios简单用法
moment.js格式化日期
图片懒加载
结合原生js来写scroll事件
请求节流
创建项目
首先创建一个简单的vue项目
# vue init webpack-simple infinite-scroll-vuejs
登录后复制
然后安装项目所需要用的一些插件
# npm install axios moment
登录后复制
初始化用户数据
项目搭建完后, 跑起来看看
# npm run dev
登录后复制
打开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 { 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 }}
- Birthday: {{ formatDate(person.dob)}}
Location: {{ person.location.city}}, {{ person.location.state }}
登录后复制
这样页面就能显示5个人的个人信息了.
处理无限滚动加载逻辑
我们接下来需要在methods里面添加scroll()来监听滚动, 并且这个事件是应该在mounted()这个生命周期内的. 代码如下:
// ... methods: { // ... scroll(person) { let isLoading = false window.onscroll = () => { // 距离底部200px时加载一次 let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight { person.push(response.data.results[0]) isLoading = false }) } } } }, mounted() { this.scroll(this.persons) }}
登录后复制
这段代码原文是有一点拼写错误的. 我这里修正了, 另外增加了距离底部即开始加载数据, 并进行截流.
保存好, 回到浏览器, 查看效果, 已经没有问题了~
总结
滚动到页面底部无限加载的功能在Vue上实现其实和普通的页面开发差不多, 每次滚动加载未完成的情况下不会触发请求下一次, 每次请求push到数组内, 通过的数据绑定实现了懒加载(其实0 0我不太认可…), 看完是不是感觉挺简单的.
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue-cli3.0配置详解
Angular CLI创建Angular项目步骤详解
以上就是Vue下拉至页面底部立刻加载数据的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2767095.html
