H5下拉刷新和上拉加载实现原理浅析

最新推荐文章于 2023-09-01 14:50:30 发布

月将明

最新推荐文章于 2023-09-01 14:50:30 发布

阅读量393

点赞数

分类专栏：前端文章标签： h5

本文链接：https://blog.csdn.net/weixin_43758377/article/details/108434173

版权

本文探讨了移动端H5中下拉刷新和上拉加载的实现原理。下拉刷新通过监听touchstart、touchmove和touchend事件，结合CSS3 translateY实现。上拉加载则依赖于onscroll事件，结合节流函数判断滚动到底部。

摘要由CSDN通过智能技术生成

前言
在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。

实现原理

下拉刷新
实现下拉刷新主要分为三步：

监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置。

<main>
    <p class="refreshText"></p>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
</main>

(function(window) {
   
    var _element = document.getElementById('refreshContainer'),
      _refreshText = document.querySelector('.refreshText'),
      _startPos = 0,
      _transitionHeight = 0;

    _element.addEventListener('touchstart', function(e) {
   
        console.log(