Vue.js 开发实践:实现精巧的无限加载与分页功能

https://segmentfault.com/a/1190000005351971#articleHeader9

需求分析

当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如:

数据量过大,影响加载速度
用户体验差,很难定位到之前自己看过的某篇文章
扩展性差,如果200条变为2000条或者更多

所以常见的解决思路就是至底时加载数据或者分页展示。无限加载的实现过程类似于:
ajax类方法获取数据
数据存入本地数组
数组中的每条数据对应插入一个HTML模板片段中
将HTML片段append到节点中

前端分页的实现过程类似于:
ajax类方法获取数据
数据替换本地数组
数组中的每条数据对应插入一个HTML模板片段中
清空节点后将HTML片段append到节点中

往往修改或者维护代码时,我们会发现渲染HTML和插入部分是比较烦人的。因为我们需要将HTML拼接成字符串,在对应的位置插入数据,往往就是一段非常长的字符串,之后想要加个class都费劲。es6的模板字符串让这个情况有所好转,但是依然有瑕疵(例如实际编写时无法HTML代码高亮)。

同时我们还需要写不少for或者forEach去循环数组,再命令式的append,如果这段代码片段有一些复杂的交互,可能还需要通过事件代理绑定一堆方法。

如果在完成这类业务时,你也遇到过上述的问题,那么你就会发现Vue真是太coooooool了,let’s vue!

先从完成加载更多功能入手。为了和之后的分页保持一致,我的页面准备由两部分组成,一是信息列表,二是底部的一个加载更多的按钮

这个先到这这里

我得知我要做的功能是:Vue实现下滑到底部加载固定几条数据

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/85323270