Vue fügt dem oberen Effekt auf der Seite einen Bildlauf hinzu

Dieses Mal erkläre ich Ihnen, wie Sie in Vue auf der Seite einen Scroll-Effekt zum oberen Rand hinzufügen. Was sind die Vorsichtsmaßnahmen zum Hinzufügen eines Scroll-Effekts zum oberen Rand in Vue? Schauen wir uns das Folgende an.

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:

Wenn „listview“ die Detailseite aufruft, 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 es gibt kein Muster zwischen dem ScrollY zwischen der Listenansicht und der Detailseite.

3. Lösung: Korrigieren Sie die Position der Scroll-Seite oben, wenn Sie die Detailseite aufrufen

4. Code-Implementierung: Der Text in Vue ist wie folgt, wie für den aktualisiertenLebenszyklusim Inneren

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

5. Das Problem wurde gelöst, aber wenn das Netzwerk langsam ist, kann man deutlich erkennen, dass das Scrollen vom unteren zum oberen Rand der Seite nicht sehr schön ist. Dieses Problem kann selbst gelöst werden, wenn das Netzwerk Daten maskiert und lädt, fügte ich hinzu

6. teilt mit, wie man einen Interceptor für Vue schreibt, um über die Anmeldeseite auf die Hauptseite zuzugreifen

(1) Speichern Sie SitzungSpeicher

sessionStorage.setItem('isLogin', true)

, wenn die login.vue-Anmeldung erfolgreich ist (2) Schreiben Sie

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()
 }
})

in die index.js des Routers Der Abfangjäger ist nun fertig!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie die Sass-Konfiguration im Vue-Projekt

So verwenden Sie das On-Change-Attribut in IView

Das obige ist der detaillierte Inhalt vonVue fügt dem oberen Effekt auf der Seite einen Bildlauf hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!