vue实现：聊天记录，下拉加载下一页数据，并让页面停留在原位置

需要实现一个类似微信聊天记录的功能，其中碰到一个问题：下拉加载下一页数据时，将请求到的数据放到原数组前面，这时候vue会自动重新渲染页面，页面会回到顶部，这并不是我要的效果。

实现思路：

1、首先，要实现让页面到某个位置，需要用到scrollTop属性；

2、然后就需要计算scrollTop的值为多少，则滑动多少距离；

3、计算滑动距离的思路：既然需要停留在当前位置的话，那么正常思考的话就是需要知道加载的这一页数据所占的高度，然后将scrollTop值设置为这个高度即可，但这里有个问题，即便每次加载十条记录，但高度很难确定，

      比如：当下一页数据不足10条时，或者数据类型不是文字而是图片时，那么高度就是不确定的。所以想直接得到数据的高度很难实现，那么就换一种方向：上面的高度算不了，就算下面的高度：首先，先记录下下拉时的

      滚动页面的整个高度，然后，当下一页数据加载完之后，重新获取一下滚动区域页面的高度，于是，这一次加载的数据的高度就是现在的高度-上一次的高度，简单代码如下：

let scrollTop = element.scrollHeight(滚动区域的滚动高度) - this.lastScrollHeight(上一次的高度)
element.scrollTop = scrollTop

这样就实现了让页面停留在原位置而不是在顶部了~正常的到这里就结束了，不过在ios上还有个问题：由于下拉刷新时因滚动条还没稳定下来导致的scrollTop值设置无效（偶现）

当下拉时，ios手机触碰到页面顶部时，如果滑动的大点，安卓手机触顶了就定在那了，而ios手机滚动条会动，会往上再走一点，然后又回弹回来，这个时候它的滚动条还没稳定下来，然后就设置了scrollTop值，即便值是对的，也设置成功了，但页面就是不会滚到原位置，而是停留在顶部；解决方法：在触发下拉事件时，添加一个延时，让滚动条稳定下来，然后再去获取高度并设置scrollTop值，这个时候就可以了。

setTimeout(()=>{
    let scrollTop = element.scrollHeight(滚动区域的滚动高度) - this.lastScrollHeight(上一次的   高度)
    element.scrollTop = scrollTop
},500) // 事件可看情况调整，我这里设置的500ms，已经正常了