Vue下滚动到页面底部无限加载数据Demo

elarity 发布于2019-08-22 16:36 / 2956人阅读

摘要：下滚动到页面底部无限加载数据看到一篇觉得挺实用的就看了下顺便简单翻译了一下给需要的人参考从这个项目中可以加深对的生命周期的理解何时开始请求如何结合使用原生来写事件等等我这里主要是对原文的重点提取和补充本文技术要点生命周期简单用法格式化日期图

Vue下滚动到页面底部无限加载数据Demo

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

从这个项目中可以加深对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无误后, 我们开始修改代码, 先看看获取用户数据这块,

这里原作者也专门提醒, 完全没有必要也不建议在加载页面的时候请求5次, 只是这个接口一次只能返回1条数据, 仅用于测试才这样做的. 当然我这里也可以通过Mock来模拟数据, 就不详细说了~

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

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

处理无限滚动加载逻辑

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

这段代码原文是有一点拼写错误的. 我这里修正了, 另外增加了距离底部即开始加载数据, 并进行截流.

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

总结

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

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

GPU云服务器云服务器 js滚动条到最后数据自动加载 js滚动加载数据 js 滚动加载数据页面底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94497.html

超酷的 mip-infinitescroll 无限滚动（无限下拉）

摘要：写在前面无限滚动又叫做无限下拉技术被广泛应用于新闻类，图片预览类网站。因此，继列表组件之后，为提升用户体验，开发了无限滚动组件。属性非必选项与模板对应，用来标识所采用的模板，默认取组件子节点中的模板。写在前面无限滚动（又叫做无限下拉）技术被广泛应用于新闻类，图片预览类网站。对用户来讲，使用无限滚动的页面有源源不断的信息可以预览，增加用户在页面的停留时长。技术上原理也很简单，在页面加...

CloudwiseAPM 2019-08-20 15:09 评论0 收藏0
vue 模仿今日头条demo

vue 头条 demo 写在前面总结一下写 demo 过程中遇到的一些问题，方便自己的学习总结！如有错误，还请指正！一直想学习使用 vue ，并准备以后在实际项目使用，之前跟着慕课网黄轶老师敲了一下饿了么商品购买页的demoele效果预览该 demo 借鉴自 hcy1996-github 这个项目，但内部内容，布局风格，完全不同，只为共同学习，共同交流数据接口直接打开今日...

simpleapples 2019-08-21 12:03 评论0 收藏0
如何实现无限滚动

摘要：简介无限滚动对我们来说已经是很常见的功能了，具体表现为当页面滚动到某个位置时就自动加载数据，本文将探讨无限滚动的实现原理以及优化。简介无限滚动对我们来说已经是很常见的功能了，具体表现为当页面滚动到某个位置时就自动加载数据，本文将探讨无限滚动的实现原理以及优化。原理我们先看看最简单的无限滚动的例子： function fetchData() { fetch(path).the...

antz 2019-08-19 18:08 评论0 收藏0
每日 30 秒 ⏱ 判断是否为页面底部

showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 简介分页、优化、可视区域、无限加载写前端页面时最经常遇到的开发需求之一就是渲染后端数据返回的数据对象，当数据对象数量极多的时候便需要进行分页。常见的分页方式有三种：在页面底部生成上一页、下一页、页面列表按钮。用户可以很直接的选择...

callmewhy 2019-08-26 13:36 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

Hanks10100 2019-08-20 14:39 评论0 收藏0