Implementation principle and code implementation of mobile pull-down refresh header

Implementation principle of pull-down refresh

There are three steps to implement pull-down refresh:

  1. Listen to the native touchstart event and record the value of its initial position, e.touches [0]. Page;
  2. Listen to the native touchmove event, record and calculate the difference between the current sliding position value and the initial position value. If the difference is greater than a critical value, the pull-down refresh header will be displayed, and the overflow property of the page will be set to false;
  3. Listen to the native touchend event. If the element sliding has reached the maximum value at this time, refresh. After the operation, 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>Drop-down refresh</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 coordinate at the beginning of finger touch
        let endY = 0;   //Y coordinate at the end of finger touch
        let flag = false; //Whether the pull-down refresh has reached the critical value
        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 = "Release refresh now...";
            }
        });
        //Loosen fingers
        parent.addEventListener('touchend', function (e) {
            if (isTop() && flag) {
                refreshText.innerHTML = "Refresh...";
                //Perform the update operation. When the update is finished, the drop-down refresh is finished
                setTimeout(function () {
                    parent.style.transform = "translateY(0)";
                    document.body.style.overflow = 'auto';
                }, 2000);
            }
        });
        //scrollTop didn't roll
        function isTop() {
            let t = document.documentElement.scrollTop || document.body.scrollTop;
            return t === 0 ? true : false;
        }
    }
</script>

Notice the overflow property setting of the body.

Tags: Javascript

Posted on Wed, 04 Dec 2019 13:58:15 -0800 by Chris_Mc_1985