本文例項為大家分享了仿寫手機端下拉重新整理的具體程式碼，供大家參考，具體內容如下

話不多說先看效果圖：

當下拉小於40px時顯示文字：

當下拉大於40px時現實文字

鬆開時顯示文字

實現原理

<div class="content">
        <div class="left"></div>
        <div class="top">
            <p id="p"></p>
            <div id="buttom">
            </div>
        </div>
</div>

：

<style>
    * {
        margin: 0;
      ddLfXOHCKY  padding: 0;
        box-sizing: border-box;
    }
    
    .content {
        width: 350px;
        height: 600px;
        position: relative;
        margin: 0 auto;
    }
    
    .top {
        width: 100%;
        height: 100%;
        background-color: #ccc;
        border: 12px solid black;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 50px;
        border-top: 35px solid black;
    }
    
    #buttom {
        width: 100%;
        height: 100%;
        background-color: rgb(47,196,47);
        position: relative;
        padding: 10px;
        border-top: 2px solid red;
    }
    
    #p {
        display: inline-blddLfXOHCKY
 
ock;
        height: 30px;
        width: 100%;
        text-align: center;
        line-height: 30px;
        color: rgb(2,2,2);
        font-size: 15px;
        position: absolute;
        top: 40px;
        left: 0;
        display: none;
    }
    
   ddLfXOHCKY .left {
        height: 10px;
        width: 100px;
        background-color: #ccc;
        position: absolute;
        top: 12px;
        left: 110px;
        border-radius: 5px;
    }
    
    .left::after {
        display: inline-block;
        content: "";
        width: 15px;
        height: 15px;
        background-color: #ccc;
        border-radius: 50%;
        position: absolute;
        left: 120px;
        top: -2px;
    }
</style>

JS：

<script>
    var but = document.getElementById("buttom");
    var p = document.getElementById("p");
    var moveY = 0 //初始化按下時的位置
    var tops = 0; //初始化tops。tops為下拉的距離
    but.onmousedown = function(e) { //滑鼠按下事件
        moveY = e.offsetY //獲取滑鼠按下時Y軸的位置
        but.onmousemove = function(e) { //滑鼠移動事件
            p.innerHTML = "下拉重新整理"
            p.style.display = "block"; //滑鼠移動時現實提升文字並且讓文字為“下拉重新整理”
            tops = e.offsetY - moveY //tops大小為滑鼠Y軸移動的距離減去按下時的距離
            if (tops < 0) {
                tops = 0 //阻止上拉
            } else if (tops > 40) {
                //tops大於40時提示可以鬆開滑鼠馬上重新整理
                p.innerHTML = "鬆開立刻重新整理"
            }
            this.style.top = tops + 'px'; //讓元素相對定位的top值等於tops的值
            // console.log(tops)
        }
        but.onmouseup = function() { //滑鼠鬆開事件
            but.onmousemove = null //清空滑鼠移動事件，阻止元素繼續跟著滑鼠移動
            if (tops < 40) {
                //如果下拉距離b不足40px的話，元素馬上覆位不進行重新整理，並且提示文字消失
                this.style.top = 0;
  www.cppcns.com              p.style.display = "none"
            } else {
                //如果下拉距離大於40px提示正在重新整理
                p.innerHTML = "正 在 刷 新 . . ."
                setTimeout(() => { //延遲1.3秒後復位，這裡做的只是模仿，實際專案需要在重新請求資料成功後復位
                    tops = 0
                    this.style.top = tops;
                    p.style.display = "none"
                },1300);
            }
        }
    ddLfXOHCKY}
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。