Vue ajoute un défilement vers l'effet supérieur de la page

Cette fois, je vais vous expliquer comment ajouter un effet de défilement vers le haut en vue sur la page. Quelles sont les précautions pour ajouter un effet de défilement vers le haut en vue sur la page. . Ce qui suit est un cas pratique. Jetons un coup d'œil.

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 :

Lorsque 'listview' entre dans la page de détails, la page de détails s'affiche en haut de la page.

2. Permettez-moi d'abord de vérifier le défilementY des deux pages suivantes. Il est différent à chaque fois, et il n'y a pas de modèle entre le défilementY entre la vue liste et la page de détails

.

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 dans vue est la suivante, comme pour lecycle de vieà l'intérieur

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

5. Le problème a été résolu, mais lorsque le réseau est lent, on voit bien que le processus de défilement du bas vers le haut de la page n'est pas très beau. Ce problème peut être résolu par vous-même lorsque le réseau charge les données Masquage et chargement, j'ai ajouté

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

(1) Enregistrer la sessionStockage

sessionStorage.setItem('isLogin', true)

lorsque la connexion login.vue est réussie (2) Écrivez

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

dans l'index.js du routeur L'intercepteur est maintenant terminé !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser la configuration sass dans le projet vue

Comment utiliser l'attribut on-change dans IView

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!