前端老司机第一次使用 mescroll.js 来实现下拉加载历史消息功能-原理简述

简述

mescroll.js 是在 H5端 运行的下拉刷新和上拉加载组件（由于前端快速发展，也提供了 uni 版本）。当然在 H5 领域还有很多很多其他的组件可以使用，这里主要就简单介绍 mescroll.js 和 better-scroll。

官方介绍：mescroll 是 div 原生的 overflow: auto 滚动. 与 iScroll 和 better-scroll 通过 js 模拟列表滚动不同, mescroll 的性能更优,兼容性更好.

众所周知，在我们日常开发的场景下，一般产品的交互行为都是下拉刷新和上拉加载更多。那么对此类场景，不管是 mescroll.js 还是 better-scroll 都是能够很好的满足开发需求。不过有一类场景虽然很少，但依然存在，这类场景如：聊天记录，历史消息（本质就是下拉加载历史消息）。

实现原理

上拉加载：监听滚动到底部，触发加载逻辑，并在底部新增节点。容器内滚动内容长度变长，即可继续上滑，直到触底再进入加载逻辑。

下拉加载：监听滚动到顶部，并通过 touch 事件监听下拉位移距离直到触发下拉加载逻辑，并在顶部插入新增节点。

下拉加载调优

通过上述实现原理可知，上拉加载是在最底部插入新增内容，按照文档流从上到下的排列，底部新增之后当前展示区域不会变化，所以效果很流畅。但是下拉加载不同，当触发加载，在最顶部新增节点时，会将当前页面内容整体往下推动，从而效果上会出现页面闪动的不佳体验。合理的交互应该为，新增之后顶部显示部分新内容，但不会让页面下推，用户通过手动下滑查看更多的信息。

需要调优如上问题，原理很简单，当下拉加载新增节点时，顶部内容变多，正常情况下，展示区域会下移。那么当新增结束后，我们只要主动的让当前滚动区域向上滚动，直到加载前的展示区域，从肉眼感官上看到的就是页面不曾变动的良好体验。

当然原理上如此处理即可，在真实实践时会发现 mescroll 会有回弹等动画效果干扰体验，那么我们可以选择在组件源码中注释掉必要的动效样式，或者对部分交互逻辑进行优化。

最后

开源社区中能够实现上拉加载，下拉刷新，或者下拉加载效果的组件很多，但其实现原理都大同小异，有的是原生 div overflow:auto 滚动操作，有的是通过 transform: translate(x,y) css3 的方式，只要掌握了其中实现原理，哪种效果都可以实现。

参考资料

• mescroll.js