La page vue passe à la page de défilement pour afficher le haut example_vue.js

Ci-dessous, je vais partager avec vous un exemple de basculement de la page de vue vers le haut de l'affichage de la page de défilement. Il a une bonne valeur de référence et j'espère que cela sera utile à tout le monde.

Lorsque vous utilisez Mint UI pour écrire le terminal mobile afin de passer de « listview » à la page de détails, la page de détails peut défiler car elle est plus grande que la hauteur du téléphone mobile lorsque vous cliquez sur « listview » pour y accéder. faites défiler la liste et entrez dans la page de détails, on constate que la page de détails ne vient pas du haut. Commencez à afficher.

1. Objectif :

'listview' Lorsque vous entrez dans la page de détails, la page de détails s'affichera en haut de la page.

2. Permettez-moi d'abord de vérifier le scrollY des deux pages suivantes. Il est différent à chaque fois, et je n'ai pas trouvé le scrollY entre la listview et la. page de détails. Les règles entre

3. Solution : Corriger la position de la page de défilement en haut lors de l'entrée dans la page de détails

4. Implémentation du code : L'écriture en vue est la suivante. Quant au cycle de vie mis à jour,

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

5 , Le problème a été résolu, mais lorsque le réseau est lent, on voit clairement que le processus de défilement de bas en haut de la page n'est pas très magnifique. Pour ce problème, vous pouvez ajouter le masque et le chargement lorsque le réseau charge les données. Je suis ajouté

6. partage comment écrire un intercepteur pour. Vue pour accéder à la page principale à partir de la page de connexion

(1) Enregistrez sessionStorage lorsque login.vue se connecte avec succès

sessionStorage.setItem('isLogin', true)

(2) Écrivez dans le fichier index.js du routeur

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

pour terminer l'intercepteur !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Résoudre le problème selon lequel les opérations DOM sur les pages vue ne fonctionnent pas

nodejs implémente une génération super simple de méthode de codes QR

exemple d'opération de requête en cascade agrégée nodejs+mongodb

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!