Wenn Sie diesen Titel sehen, denken Sie vielleicht, was zum Teufel ist das? Eigentlich möchte ich Folgendes sagen: Schauen Sie sich die Aufzeichnung unten an:
Diese Art der Interaktion ist auf H5-Seiten üblich. Klicken Sie auf die Stadt -> öffnen Sie die schwebende Ebene für die Stadtauswahl -> drücken Sie die Eingabetaste, um die schwebende Ebene zu schließen.
Diese Vorgänge können ausgeführt werden, ohne auf die Schaltfläche „Schließen“ in der oberen linken Ecke/oberen rechten Ecke zu klicken. Der H5 von Fliggy verfügt über eine Popup-Ebene, wenn er sich vorwärts bewegt, und die Popup-Ebene wird geschlossen, wenn er zurückgeht. Dies funktioniert bei anderen Unternehmen nicht. Qunar.com H5-Flugtickets, Meituan H5-Hotel).
Warum ist es so konzipiert?Da der H5 auf einem Mobiltelefon betrieben wird, ist der Abdeckungsbereich des mit dem Finger bedienbaren Bereichs auf dem Mobiltelefon sehr klein, ganz zu schweigen von den Totraumbereichen (Abbrechen/Schließen) in der oberen linken Ecke/oberen rechten Ecke. Diese Aktion haben Sie bestimmt schon einmal gehört: Tippen Sie, um zurückzugehen. Dies ist für Benutzer sehr praktisch und benutzerfreundlich. Nach der Auswahl einer Stadt ist es nicht erforderlich, auf „Abbrechen“ zu klicken, um die Popup-Ebene zu schließen.
So erreichen Sie esDa die Nachfrage so groß ist, werden Sie als Entwickler auf jeden Fall Ihr Bestes geben, um diese Funktion zu implementieren. Sie müssen nicht einmal googeln, Ihnen sollten Methoden wie History.back(), History.go() einfallen. Allerdings ist es immer noch sinnlos, daran zu denken, da sich die URL geändert hat. Wenn Sie sich wirklich mit Single-Page-Anwendungen (SPA) auskennen oder React/Vue verwenden, sollten Sie wissen, dass es etwas namens Routing gibt. Bei diesen URL-Änderungen, die den Hash ändern und nicht aktualisiert werden können, handelt es sich um die in HTML5 hinzugefügten Verlaufsfunktionen.
die-history-schnittstelle
interface History { readonly attribute unsigned long length; attribute ScrollRestoration; readonly attribute any state; void pushState(any data, DOMString title, optional DOMString? url = null); void replaceState(any data, DOMString title, optional DOMString? url = null);};
Es gibt eine weitere Veranstaltung
pushState und replaceState werden verwendet, um die Reihenfolge des Verlaufsstapels zu ändern. Onpopstate wird beim Zurückkehren und Vorwärtsbewegen ausgelöst.
Das Gleiche gilt für die Implementierung in vue-router (Zeile 1694).
Konkrete UmsetzungNachdem wir nun so viel gesagt haben, werfen wir einen Blick darauf, wie diese Funktion implementiert wird.
Werfen wir einen Blick auf die Kompatibilität von pushState und replaceState
Es ist komplett umweltfreundlich und fühlt sich in der Anwendung viel sicherer an.
Idee:
<button onclick=city()> Stadt</button><br> <button onclick=calendar()> Kalender</button><br> <button onclick=description()> Beschreibung</button> <div id=city class=com style=display: none;> Simulationsstadt-Popup-Ebene</div> <div id=calendar class=com style=display: none;> Simulationskalender-Popup-Ebene</div> <div id=description class=com style=display: none;> Beschreibungs-Popup-Ebene simulieren</div>
button { Grenze: #0000; Hintergrundfarbe: #888589;
var cityNode = document.getElementById('city'); var CalendarNode = document.getElementById('description'); ; window.history.pushState({'id':'city'},'','#city') } function Calendar() { CalendarNode.style.display = 'block'; window.history.pushState({'id':'calendar'},'','#calendar') } function description() { descriptionNode.style.display = 'block'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ // alarm('state:' + e.state + ',historyLength:' +history.length); if (e.state && e.state.id === 'city') {history.replaceState('','','#'); cityNode.style.display = 'block'; } else if (e.state && e.state.id === 'calendar') { History.replaceState('','','#'); display = 'block'; } else if (e.state && e.state.id === 'description') {history.replaceState('','','#'); descriptionNode.style.display = 'block'; .style.display = 'none'; CalendarNode.style.display = 'none'; descriptionNode.style.display = 'none';
Schauen Sie sich hauptsächlich den JS-Code an und überwachen Sie die Vorwärts- und Rückwärtsereignisse der Seite, um den Verlauf zu steuern.
Quellcode hier
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.