下拉加载更多(模拟微信聊天记录),滚动条划到顶部出发,加载完数据之后还能停留在上次浏览的位置

发现很难实现像微信聊天记录一样下拉加载更多记录。市面上大部分的 Web 项目实现的效果都是上拉加载,下拉刷新。下拉加载更多很少见,下拉在加载数据方面与上拉是一样的,但是如何做到像微信聊天记录一样,下拉之后还是保留在原有的位置就要动动脑筋了。这里我用到的方法是:用window.location.hash控制滚动条,这样能减少一些滚动条高度的计算,我的思路是将每次加载出具的第一条聊天记录动态加上一个id选择器,这个id选择器跟页数(nums)有一一对应的关系,这样功能就实现了。

下拉加载更多(模拟微信聊天记录),滚动条划到顶部出发,加载完数据之后还能停留在上次浏览的位置_第1张图片

下拉加载更多(模拟微信聊天记录),滚动条划到顶部出发,加载完数据之后还能停留在上次浏览的位置_第2张图片

下拉加载更多(模拟微信聊天记录),滚动条划到顶部出发,加载完数据之后还能停留在上次浏览的位置_第3张图片

 

注:以上只是个人的思路,所以就不讲代码复制出来展示啦!

你可能感兴趣的:(前端js,客服聊天系统)