Implementation Principle and Code Implementation of Pull-down Refresh Head in Mobile Terminal

Implementation Principle of Pull-down Refresh

Implementation of pull-down refresh is mainly divided into three steps:

  1. Monitor the native touchstart event and record the value of its initial position, e.touches [0]. pagey;
  2. Monitor the native touchmove event, record and calculate the difference between the current sliding position value and the initial position value. when the difference is greater than a certain critical value, display the drop-down refresh header and set the overflow property of the page to false;;
  3. Monitor the native touchend event. If the element slip has reached the maximum value at this time, refresh operation will be carried out. After the operation is completed, set the overflow property of the page to auto.

Code implementation

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>下拉刷新</title>
    <style type="text/css">
        html,body, header,p,main,span,ul,li {
            margin: 0;
            padding: 0;
        }
        #refreshContainer li {
            background-color: rgba(5, 143, 62, 0.603);
            margin-bottom: 1px;
            padding: 30px 10px;
        }
        .refreshText {
            position: absolute;
            width: 100%;
            line-height: 80px;
            text-align: center;
            left: 0;
            top: 0;
            transform: translateY(-80px);
        }
    </style>
</head>
<body>
    <div class="parent">
        <p class="refreshText"></p>
        <ul id="refreshContainer">
            <li>000</li>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>666</li>
            <li>777</li>
            <li>888</li>
            <li>999</li>
        </ul>
    </div>
</body>  
</html> 

JS code implementation

<script type="text/javascript">
    window.onload = function () {
        let container = document.querySelector('#refreshContainer');
        let refreshText = document.querySelector('.refreshText');
        let parent = document.querySelector('.parent');
        let startY = 0; //手指触摸最开始的Y坐标
        let endY = 0;   //手指结束触摸时的Y坐标
        let flag = false; //下拉刷新是否达到了临界值
        parent.addEventListener('touchstart', function (e) {
            startY = e.touches[0].pageY;
        });
        parent.addEventListener('touchmove', function (e) {
            if (isTop() && (e.touches[0].pageY - startY) > 50) {
                flag = true;
                document.body.style.overflow='hidden';
                refreshText.style.height = "80px";
                parent.style.transform = "translateY(80px)";
                parent.style.transition = "all ease 0.5s";
                refreshText.innerHTML = "释放立即刷新...";
            }
        });
        //松开手指
        parent.addEventListener('touchend', function (e) {
            if (isTop() && flag) {
                refreshText.innerHTML = "正在刷新...";
                //进行更新操作,更新结束后,结束下拉刷新
                setTimeout(function () {
                    parent.style.transform = "translateY(0)";
                    document.body.style.overflow = 'auto';
                }, 2000);
            }
        });
        //scrollTop没有滚过
        function isTop() {
            let t = document.documentElement.scrollTop || document.body.scrollTop;
            return t === 0 ? true : false;
        }
    }
</script>

Note body’s overflow property setting.

Thank you for taking the precious time to read this article. If this article gives you some help or inspiration, then don’t be stingy with your praise and Star Ha. Your affirmation is my greatest motivation to move forward.https://github.com/YvetteLau/ …