Vue下滚动到页面底部无限加载数据的示例代码

Vue下滚动到页面底部无限加载数据的示例代码

看到一篇Implementing an Infinite Scroll with vue.js , 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.

本文技术要点

Vue生命周期

axios简单用法

moment.js格式化日期

图片懒加载

结合原生js来写scroll事件

请求节流

创建项目

首先创建一个简单的vue项目

# vue init webpack-simple infinite-scroll-vuejs

然后安装项目所需要用的一些插件

# npm install axios moment

初始化用户数据

项目搭建完后, 跑起来看看

# npm run dev

打开http://localhost:8080无误后, 我们开始修改代码, 先看看获取用户数据这块,

接下来来写模板结构和样式, 如下:

{{ person.name.first}} {{ person.name.last }}

Birthday: {{ formatDate(person.dob)}}

Location: {{ person.location.city}}, {{ person.location.state }}

这样页面就能显示5个人的个人信息了.

处理无限滚动加载逻辑

我们接下来需要在methods里面添加scroll()来监听滚动, 并且这个事件是应该在mounted()这个生命周期内的. 代码如下:

保存好, 回到浏览器, 查PWDvxdN看效果, 已经没有问题了~

总结

滚动到页面底部无限加载的功能在Vue上实现其实和普通的页面开发差不多, 每次滚动加载未完成的情况下不会触发请求下一次, 每次请求push到数组内, 通过的数据绑定实现了懒加载(其实0 0我不太认可...), 看完是不是感觉挺简单的.

最后, 我把这个也弄了一份在github上面, 有需要的可以看看infinite-scroll-vuejs-demo~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。