H5下拉加载更多(模拟微信聊天记录）

前段时间用H5实现一个实时聊天的功能。发现很难实现像微信聊天记录一样下拉加载更多记录。市面上大部分的 Web 项目实现的效果都是上拉加载，下拉刷新。下拉加载更多很少见，下拉在加载数据方面与上拉是一样的，但是如何做到像微信聊天记录一样，下拉之后还是保留在原有的位置就需要思考一下了。

下拉与上拉在加载数据上面基本一致，但是因为方向不同，所以也存在以下不同之处。

1. 上拉是将数据加载到原数据后面，所以用的是数组拼接 concat 方法。而下拉是将数据添加到原数据前面，所以需要使用 unshift 方法。
2. 上拉是滑动到底部时触发，下拉是滑动到顶部时触发，因此判断 scrollTop 为 0 时触发，触发完之后需要将 scrollTop 重置一下。
3. 为了模拟微信聊天记录加载方式，下拉之后需要滑动到原先的位置。通过 scrollTo 方法实现，scrollTo(x,y) 接收两个参数，x 为页面 X 轴，y 为页面 Y 轴，这里显然是需要修改 Y 轴的距离。x 为 0 即可。而 y 值就是第一次的 scrollHeight 滑动高度，因为每次加载的数据都是一样的，所以使用 scrollHeight 作为上次滑动位置。
4. 代码中有很多定时器的使用，主要是为了防止用户频繁滑动（节流）以及在列表渲染之后再去获取 DOM 属性。

1. 封装一个加载数据的方法，首先加载初始数据；
2. 获取列表的 scrollHeight，将记录定位到最底部，也就是最新的记录在可视区域的最下面。
3. 监听滑动，当滑动到最顶部时，加载一屏数据，同时滑动定位到上次初始的位置。





cOntent=">