suchen

Heim >Web-Frontend >H5-Tutorial >HTML5 implementiert Pulldown-Aktualisierung auf mobilen Endgeräten (Prinzip und Code)

HTML5 implementiert Pulldown-Aktualisierung auf mobilen Endgeräten (Prinzip und Code)

不言
不言Original
2018-08-01 11:48:3117218Durchsuche

Dieser Artikel stellt Ihnen die HTML5-Implementierung der mobilen Pulldown-Aktualisierung vor (Prinzip und Code). Ich hoffe, dass er für Freunde hilfreich ist.

Pulldown-Aktualisierung auf der mobilen Seite ist eine sehr häufige Funktion, und es gibt viele Open-Source-Bibliotheken, die diese Funktion implementieren. Um es jedoch zu lernen, ist es besser, ein Beispiel dafür zu schreiben Lerne es zuerst. Bei einigen Berührungsereignissen und einigen DOM-Eigenschaften werden CSS3-Eigenschaften verwendet. Gehen Sie direkt zum Code. Der Code enthält Kommentare. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style type="text/css">
        html,
        body,
        header,
        p,
        main,
        p,
        span,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        #refreshContainer li {
            background-color: #eee;
            margin-bottom: 1px;
            padding: 20px 10px;
        }

        .refreshText {
            position: absolute;
            width: 100%;
            line-height: 50px;
            text-align: center;
            left: 0;
            top: 0;
            transform: translateY(-50px);
        }
    </style>
</head>

<body>
    <main class="parent">
        <p class="refreshText"></p>
        <ul id="refreshContainer">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
        </ul>
    </main>
    <script type="text/javascript">
        window.onload = function(){
            //1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom
            let container = document.querySelector('#refreshContainer');
            let refreshText = document.querySelector('.refreshText');
            let parent = document.querySelector('.parent');

            //2.定义一些需要常用的变量
            let startY = 0;//手指触摸最开始的Y坐标
            let endY = 0;//手指结束触摸时的Y坐标
           
            //3.给列表dom监听touchstart事件,得到起始位置的Y坐标
            parent.addEventListener('touchstart',function(e){
                startY = e.touches[0].pageY;
            });
            //4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字
            parent.addEventListener('touchmove',function (e) { 
                if(isTop() && (e.touches[0].pageY-startY) > 0){
                    console.log('下拉了');
                    refreshText.style.height = "50px";
                    parent.style.transform = "translateY(50px)";
                    parent.style.transition = "all ease 0.5s";
                    refreshText.innerHTML = "释放立即刷新...";
                }
            });
            //5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了
            parent.addEventListener('touchend',function (e) { 
                if(isTop()){
                    refreshText.innerHTML = "正在刷新...";
                    setTimeout(function(){
                        parent.style.transform = "translateY(0)";
                        console.log('成功刷新');
                    },2000)
                }
                return;
            })
            function isTop(){
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                return t === 0 ? true : false;
            }

        }
    </script>
</body>

</html>

  • Transformieren und Animieren in CSS3 werden verwendet. Denn da sie alle mobil sind, werden diese Dinge grundsätzlich unterstützt.

  • Bitte schauen Sie sich den Code für Details an, es gibt auch Kommentare. Dieser Artikel erklärt nur das Prinzip und wird später in ein Objekt gekapselt. Bequem direkt anzurufen.

Empfohlene verwandte Artikel:

vue.js mobiles Terminal implementiert Pull-Up-Laden und Pull-Down-Aktualisierung

Mobile Pulldown-Aktualisierung, iScroll.js-Nutzung (Nachdruck)_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonHTML5 implementiert Pulldown-Aktualisierung auf mobilen Endgeräten (Prinzip und Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css3 vue.js 封装 JS 对象 事件 dom transform
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie Canvas den Code für QR-Code und Bildsynthese implementiertNächster Artikel：Wie Canvas den Code für QR-Code und Bildsynthese implementiert

In Verbindung stehende Artikel

Mehr sehen