Natives js imitiert die Pulldown-Aktualisierung eines Mobiltelefons

<div Klasse="Inhalt">
        <div Klasse="links"></div>
        <div Klasse="oben">
            <p id="p"></p>
            <div id="hinten">
            </div>
        </div>
</div>

<Stil>
    * {
        Rand: 0;
        Polsterung: 0;
        Box-Größe: Rahmenbox;
    }
    
    .Inhalt {
        Breite: 350px;
        Höhe: 600px;
        Position: relativ;
        Rand: 0 automatisch;
    }
    
    .Spitze {
        Breite: 100 %;
        Höhe: 100%;
        Hintergrundfarbe: #ccc;
        Rand: 12px tief schwarz;
        Rahmenradius: 10px;
        Überlauf: versteckt;
        Rand oben: 50px;
        Rahmen oben: 35px tief schwarz;
    }
    
    #Taste {
        Breite: 100 %;
        Höhe: 100%;
        Hintergrundfarbe: rgb(47, 196, 47);
        Position: relativ;
        Polsterung: 10px;
        Rahmen oben: 2px durchgehend rot;
    }
    
    #P {
        Anzeige: Inline-Block;
        Höhe: 30px;
        Breite: 100 %;
        Textausrichtung: zentriert;
        Zeilenhöhe: 30px;
        Farbe: rgb(2, 2, 2);
        Schriftgröße: 15px;
        Position: absolut;
        oben: 40px;
        links: 0;
        Anzeige: keine;
    }
    
    .links {
        Höhe: 10px;
        Breite: 100px;
        Hintergrundfarbe: #ccc;
        Position: absolut;
        oben: 12px;
        links: 110px;
        Rahmenradius: 5px;
    }
    
    .links::nach {
        Anzeige: Inline-Block;
        Inhalt: "";
        Breite: 15px;
        Höhe: 15px;
        Hintergrundfarbe: #ccc;
        Randradius: 50 %;
        Position: absolut;
        links: 120px;
        oben: -2px;
    }
</Stil>

<Skript>
    var aber = document.getElementById("buttom");
    var p = document.getElementById("p");
    var moveY = 0 //Position beim Drücken initialisieren var tops = 0; //Tops initialisieren. oben ist die Distanz zum Herunterziehenbut.onmousedown = function(e) { //Maus drücken eventmoveY = e.offsetY //Position der Y-Achse abrufen, wenn die Maus gedrückt wirdbut.onmousemove = function(e) { //Maus bewegen eventp.innerHTML = "Zum Aktualisieren nach unten ziehen"
            p.style.display = "block"; //Wenn die Maus bewegt wird, wird der Text als "zum Aktualisieren nach unten ziehen" angezeigt.
            tops = e.offsetY - moveY //tops-Größe ist die Distanz, die die Maus auf der Y-Achse zurücklegt, abzüglich der Distanz, die sie beim Drücken zurücklegt if (tops < 0) {
                tops = 0 //Stoppe Hochziehen } else if (tops > 40) {
                //Wenn tops größer als 40 ist, werden Sie aufgefordert, die Maus loszulassen, um sofort zu aktualisieren. p.innerHTML = "Zum sofortigen Aktualisieren loslassen"
            }
            this.style.top = tops + 'px'; //Der obere Wert der relativen Positionierung des Elements muss gleich dem Wert von tops sein // console.log(tops)
        }
        but.onmouseup = function() { //Maus loslassen-Ereignis but.onmousemove = null //Mausbewegungsereignisse löschen, um zu verhindern, dass Elemente weiterhin der Maus folgen if (tops < 40) {
                //Wenn die Pulldown-Distanz b weniger als 40px beträgt, wird das Element sofort ohne Aktualisierung zurückgesetzt und der Eingabeaufforderungstext verschwindet this.style.top = 0;
                p.style.display = "keine"
            } anders {
                //Wenn die Pulldown-Distanz größer als 40 Pixel ist, wird eine Meldung angezeigt, dass eine Aktualisierung durchgeführt wird. p.innerHTML = "Aktualisiert ..."
                setTimeout(() => { //Zurücksetzen nach 1,3 Sekunden Verzögerung. Dies ist nur eine Simulation. In tatsächlichen Projekten muss tops = 0 nach erfolgreicher erneuter Datenanforderung zurückgesetzt werden.
                    dieser.Stil.top = Oberteile;
                    p.style.display = "keine"
                }, 1300);
            }
        }
    }
</Skript>