原生js下拉刷新、上拉載入效果實作（附程式碼）-js教程-PHP中文網

首頁

web前端

js教程

原生js下拉刷新、上拉載入效果實作（附程式碼）

云罗郡主

Oct 11, 2018 pm 03:35 PM

這篇文章帶給大家的內容是關於原生js下拉刷新、上拉加載效果實現（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

原生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="/static/imghwm/default1.png"  data-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"  class="lazy"  
            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中文網。

以上是原生js下拉刷新、上拉載入效果實作（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：qdfuns。如有侵權，請聯絡admin@php.cn刪除

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

如何創建和發布自己的JavaScript庫？Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

jQuery矩陣效果Mar 10, 2025 am 12:52 AM

將矩陣電影特效帶入你的網頁！這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效，只需選擇一張圖片，插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧，非常有趣！工作原理插件將圖片加載到畫布上，讀取像素和顏色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域，並利用jQuery計算每個區域的平均顏色。然後，使用

如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。如今，圖片輪播已成為網站必備功能——一圖胜千言！決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何