Die Vue-Seite wechselt zur Bildlaufseite, um die oberste Datei example_vue.js anzuzeigen

Im Folgenden werde ich Ihnen ein Beispiel für das Umschalten der Vue-Seite an den oberen Rand der Scroll-Seitenanzeige vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Wenn Sie mit Mint UI schreiben, dass das mobile Terminal von „Listenansicht“ zur Detailseite springt, kann die Detailseite gescrollt werden, da sie größer als die Höhe des Mobiltelefons ist Scrollen Sie durch die Liste und rufen Sie die Detailseite auf. Es wird festgestellt, dass die Detailseite nicht ganz oben angezeigt wird.

1. Ziel:

„Listenansicht“ Beim Aufrufen der Detailseite wird die Detailseite oben auf der Seite angezeigt.

2. Lassen Sie mich zunächst das ScrollY der nächsten beiden Seiten überprüfen. Es ist jedes Mal anders und ich habe das ScrollY zwischen der Listenansicht und dem nicht gefunden Detailseite. Die Regeln zwischen

3. Lösung: Korrigieren Sie die Position der Scroll-Seite oben beim Aufrufen der Detailseite

4. Code-Implementierung: Der aktualisierte Lebenszyklus ist wie folgt:

updated() { 
    window.scroll(0, 0); 
  }

5. 🎜>Das Problem wurde gelöst, aber wenn das Netzwerk langsam ist, kann man deutlich erkennen, dass der Vorgang des Scrollens von unten nach oben nicht sehr schön ist Bei diesem Problem können Sie die Maske hinzufügen und laden, wenn das Netzwerk Daten lädt.

6 teilt mit, wie man einen Interceptor für Vue schreibt Rufen Sie die Hauptseite über die Anmeldeseite (1) in login auf. Wenn sich Vue erfolgreich anmeldet, wird es im sessionStorage gespeichert

sessionStorage.setItem('isLogin', true)

(2) Schreiben Sie

< in Router's index.js 🎜>

router.beforeEach((to, from, next) => {//  '/'是登陆页面的路由
 if (to.path == '/') {
  sessionStorage.removeItem('isLogin');
 }
 let user = JSON.parse(sessionStorage.getItem('isLogin'));
 if (!user && to.path != '/') {
  next({ path: '/' })
 } else {
  next()
 }
})

, um den Interceptor zu vervollständigen!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Lösung des Problems, dass DOM-Operationen auf Vue-Seiten nicht funktionieren

Nodejs implementiert eine supereinfache Generierung von QR-Codes-Methode

nodejs+mongodb aggregierte Kaskadenabfrageoperationsbeispiel

Das obige ist der detaillierte Inhalt vonDie Vue-Seite wechselt zur Bildlaufseite, um die oberste Datei example_vue.js anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!