ホームページ > 記事 > ウェブフロントエンド > ネイティブ JS プルダウン更新およびプルアップ読み込み効果の実装 (コードが添付されています)

ネイティブ JS プルダウン更新およびプルアップ読み込み効果の実装 (コードが添付されています)

云罗郡主転載: 2018-10-11 15:35:575132ブラウズ

この記事は、ネイティブ JS のプルダウン更新とプルアップ読み込みの効果の実装に関するものです (コード付き)。必要な方は参考にしていただければ幸いです。あなたのお役に立てますように。

コンソールをモバイル端末に切り替えて効果を確認してください

<!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>

上記は、ネイティブ JS プルダウンの更新とプルアップの実装です。読み込み効果 (コードが添付されています))、JavaScript ビデオチュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がネイティブ JS プルダウン更新およびプルアップ読み込み効果の実装 (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript JS

声明：

この記事はqdfuns.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Ajaxバックエンドの書き方は？フロントエンドとバックエンドの対話を実装する方法 (コード例)次の記事：Ajaxバックエンドの書き方は？フロントエンドとバックエンドの対話を実装する方法 (コード例)

続きを見る