Maison > interface Web > js tutoriel > Vue ajoute un défilement vers l'effet supérieur de la page

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

php中世界最好的语言
Libérer: 2018-04-11 14:12:41
original
3265 Les gens l'ont consulté

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); 
  }
Copier après la connexion

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)
Copier après la connexion

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()
 }
})
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal