移动端如何实现下拉刷新、下拉加载更多

下拉刷新、下拉加载更多是移动端常用的功能。主要是通过监听touchstart、touchmove、touchend来实现。

实现方法

对于小程序、APP来说都有相应的API来轻松实现，所以我这边只将在H5页面中如何实现，虽然H5也有iScroll、BetterScroll、Ant Design Mobile 等第三方库。

方案如下： 对于下拉刷新，只需监听可滚动容器的touchmove事件，如果可滚动容器滚动到顶部，那么马上记录当前手势位置为起始位置，如果继续滑动，那么就给可滚动容器设置transform: translateY为当前手势位置Y数值-起始手势位置Y数值，如果需要，也可以加入动态系数来实现阻尼感。 对于上拉加载更多，原理其实差不多，只是方向不同。