Retourner la méthode d'implémentation dans la page HTML5

Quand vous voyez ce titre, vous vous demandez peut-être qu'est-ce que c'est ? En fait, ce que je veux dire, c'est ceci, regardez l'enregistrement ci-dessous :

Ce type d'interaction est courant dans les pages H5. Cliquez sur la ville -> faites apparaître le calque flottant de sélection de ville -> appuyez sur le bouton Retour pour fermer le calque flottant.

Ces opérations peuvent être effectuées sans cliquer sur le bouton de fermeture dans le coin supérieur gauche/coin supérieur droit. Le H5 de Fliggy a un calque contextuel lorsque vous avancez, et le calque contextuel se ferme lors du retour. Cela ne fonctionne pas pour les autres sociétés ( Billet d'avion Qunar.com H5, hôtel Meituan H5).

Étant donné que le H5 fonctionne sur un téléphone mobile, la zone de couverture de la zone actionnable au doigt sur le téléphone mobile est très petite, sans parler des zones d'espace mort (annulation/fermeture) dans le coin supérieur gauche/coin supérieur droit. Vous avez sans doute entendu cette action : appuyez pour revenir en arrière. C'est très pratique et convivial à utiliser pour les utilisateurs. Après avoir sélectionné une ville, il n'est pas nécessaire de cliquer sur Annuler. Cliquez simplement sur Retour où le pouce peut fonctionner pour fermer la couche contextuelle.

Comme il y a une très bonne demande, en tant que développeur, vous ferez certainement de votre mieux pour implémenter cette fonction. Vous n'avez même pas besoin de chercher sur Google, vous devriez pouvoir penser à des méthodes comme history.back(), history.go(). Cependant, y penser est toujours inutile. En théorie, le retour/suivant du navigateur/vue Web nécessite de recharger la page car l'URL a changé. Si vous connaissez vraiment les applications monopage (SPA), ou si vous utilisez React/Vue, sachez qu'il existe quelque chose qui s'appelle : le routage. Ces modifications d'URL qui modifient le hachage et ne peuvent pas être actualisées sont les fonctions d'historique ajoutées dans HTML5.

l'interface-historique

 interface History { attribut en lecture seule longueur longue non signée; ScrollRestoration scrollRestoration; attribut en lecture seule any state; void long facultatif = 0 void pushState (toutes données, titre DOMString, DOMString facultatif?); url = null); void replaceState (toutes données, titre DOMString, DOMString facultatif ? url = null);} ;

1. état push
2. remplacerÉtat

Il y a un autre événement

1. surpopstate

pushState, replaceState sont utilisés pour modifier l'ordre de la pile de l'historique, onpopstate est déclenché lors du retour et de l'avancement.

Il en va de même pour l'implémentation dans vue-router (ligne 1694)

Maintenant que nous en avons dit tout, voyons comment implémenter cette fonction.

Jetons un coup d'œil à la compatibilité de pushState et replaceState

Tout est vert et son utilisation est beaucoup plus sûre.

Idée:

1. PushState ajoute un hachage en cliquant sur le calque contextuel
2. Lorsque l'événement onpopstate est déclenché lorsque vous appuyez pour revenir, la couche contextuelle est masquée et le hachage est modifié.

 <button onclick=city()> Ville</button><br> <button onclick=calendar()> Calendrier</button><br> <button onclick=description()> Description</button> <div id=city class=com style=display: none;> Couche contextuelle de simulation de ville</div> <div id=calendar class=com style=display: none;> Couche contextuelle de calendrier de simulation</div> <div id=description class=com style=display: none;> Simuler la couche contextuelle de description</div>

 bouton { bordure : #0000 ; couleur d'arrière-plan : #f90 ; } .com { position : haut : 0 ; gauche : 0 ;

 var cityNode = document.getElementById('city'); var calendrierNode = document.getElementById('calendar'); var descriptionNode = document.getElementById('description'); ; window.history.pushState({'id':'city'},'','#city') } function calendrier() { calendrierNode.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){ // alert('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 = 'bloc'; } else if (e.state && e.state.id === 'description') { history.replaceState('','','#'); descriptionNode.style.display = 'block' } else { cityNode; .style.display = 'aucun'; calendrierNode.style.display = 'aucun'; descriptionNode.style.display = 'aucun' } })

Regardez principalement le code JS et surveillez les événements avant et arrière de la page pour contrôler l'historique.

Code source ici

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.