手机端优化列表滚动性能——分页加载

现在在手机端列表滚动随处可见，拿现在大家都在用的微信来说，朋友圈就是一个列表，和好友发信息界面就是一个列表。

如果列表长度不长，比如你微信朋友圈一共就只有两三个人分享过他们的动态，那没问题，如果你是大屏手机估计还不用滚动就已经看完了。

但那有可能吗？有也只是少数。我们现在每天刷朋友圈那都是几屏几屏这样刷的。

我们设定一屏有五个人分享的动态，每一个动态里面有5个dom节点，即一屏有25个dom节点。

我们开始刷朋友圈，才看了四屏就已经100个节点了，再往下刷成百甚至上千个dom节点都出来了，那你手机岂不是卡成翔了。

但我们现实中刷朋友圈会越往下刷越卡吗？不会。为什么呢？

这就是今天要说的一个优化手机端列表滚动性能的方法——分页加载

什么是分页加载呢，大致意思就是把一个列表分成很多很多页，我一开始只给你显示若干页(N)，当我往下滚动到底部的时候，显示下一页，同时把最上面那一页移除。

同样道理，往上滚动时则显示上一页，同时把最下面那一页移除。这样，显示的就永远只有N页，dom节点也就永远只有Nx25个。

那么分页加载需要处理哪些问题呢？

1. 往下滚动的时候把最上面一页移除，那等我要往上滚动的时候，上一页都已经被移除掉了，我怎么获取到上一页的内容呢？

2. 既然有dom节点的移除和添加，那么我的滚动条位置要移除页面的同时要怎么设置才能让用户看起来像是无缝连接呢？

3. 我如何判断我已经滚动到了页面的顶部或底部？

4. 在滚动到底部或顶部的时候，我们具体究竟要执行哪些操作。

我们一个个来解决。

第一个问题我们只需要用两个数组来存取被移除掉的内容就OK了。

var preRemoveArray = []; //被移除的当前页面之前的页面var nextRemoveArray = []; //被移除的当前页面后面的页面

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：手机端优化列表滚动性能——分页加载

关键词：分页