Implémentation des effets natifs d'actualisation et de chargement pull-up js (code joint)-js tutoriel-php.cn

Implémentation des effets natifs d'actualisation et de chargement pull-up js (code joint)

云罗郡主

Libérer： 2018-10-11 15:35:56

avant

5158 Les gens l'ont consulté

Le contenu de cet article concerne la mise en œuvre des effets d'actualisation et de chargement pull-up natifs js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous.

Implémentation des effets natifs dactualisation et de chargement pull-up js (code joint)

Vous pouvez voir l'effet en basculant la console vers le terminal mobile

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 60px;
            background: pink;
            line-height: 60px;
            text-align: center;
            color: white;
        }
        .content {
            width: 200px;
            height: 1000px;
            border: 2px solid green;
            background: linear-gradient(#fff, #000);
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            margin: 60px auto 0;
        }
        img {
            width: 100%;
            height: 180px;
            position: absolute;
            top: 60px;
            left: 0;
            display: none;
            z-index: -1
        }
        p{
            line-height: 30px;
            text-align: center;
            display: none
        }
    </style>
</head>
<body>
    <div>
        <div>首页</div>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536127130721&di=f192c5e1749dd2aa73b8a5b7297bd0cc&imgtype=0&src=http%3A%2F%2Fs10.sinaimg.cn%2Fmiddle%2F4ac1551583fc20f4db299%26690"
            alt="">
        <div></div>
        <p>加载中...</p>
    </div>
    <script>
        var oImg = document.getElementsByTagName(&#39;img&#39;)[0];
        var oP=document.getElementsByTagName(&#39;p&#39;)[0];
        var oHeader = document.getElementsByClassName(&#39;header&#39;)[0];
        var oContent = document.getElementsByClassName(&#39;content&#39;)[0];
        var screenH = document.documentElement.clientHeight || document.body.clientHeight;
        var startY,
            moveY;
        oContent.addEventListener(&#39;touchstart&#39;, (e) => {
            startY = e.touches[0].pageY;
        })
        oContent.addEventListener(&#39;touchmove&#39;, (e) => {
            moveY = e.touches[0].pageY - startY;
        });
        oContent.addEventListener(&#39;touchend&#39;, () => {
            if (moveY > 0) {//下拉
                oImg.style.display = &#39;block&#39;;
                if (moveY > 180) moveY = 180;
                oContent.style.marginTop = moveY + oHeader.clientHeight + &#39;px&#39;;
                //刷新数据后再走下面的
                var timer = setInterval(() => {
                    moveY -= 1;
                    if (moveY <= 0) {
                        oImg.style.display = &#39;none&#39;;
                        clearInterval(timer);
                        moveY = 0
                    }
                    oContent.style.marginTop = moveY + oHeader.clientHeight + &#39;px&#39;;
                }, 4)
            } else {//上拉
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop + screenH + 20 >= oContent.scrollHeight) {
                    oP.style.display=&#39;block&#39;
                    //加载下条数据
                    setTimeout(() => {
                        oP.style.display=&#39;none&#39;
                        oContent.style.height = oContent.clientHeight + 300 + &#39;px&#39;
                    }, 500)
                }
            }
        })
    </script>
</body>
</html>

Copier après la connexion

Ce qui précède est l'implémentation de l'actualisation déroulante js native et les effets de chargement pull-up ((avec code joint), si vous voulez en savoir plus sur les Tutoriels vidéo JavaScript, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!