Comment marquer et enregistrer la position de défilement dans vue-scroller

Cet article présente principalement l'exemple de code pour vue-scroller pour enregistrer la position de défilement. Maintenant, je le partage avec vous et le donne comme référence.

Description du problème :

La page de liste entre dans la page de détails, ou la page à onglet change, puis revient à la page de liste, dans l'espoir de passer au défilement précédent position

Idées pour résoudre le problème :

Enregistrez la position avant de passer à d'autres pages, et revenez à la position en revenant à la page de liste. Cela doit être réalisé à l'aide des hooks beforeRouteEnter et beforeRouteLeave de vue-router

Il existe également une méthode plus simple et plus grossière. Ajoutez un jugement selon lequel la largeur et la hauteur ne sont pas nulles dans le vue-scroller. Code source min.js. Voir les commentaires sur la méthode d'implémentation, qui a été découverte lors de l'optimisation récente du code.

Partie code :

beforeRouteEnter(to,from,next){

 if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置

  sessionStorage.askPositon = '';

  next();

 }else{

  next(vm => {

    if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this

     setTimeout(function () {

      vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false);

     },0)//同步转异步操作

    }

  })

 }

},

beforeRouteLeave(to,from,next){//记录离开时的位置

 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top;

 next()

},

Points à noter :

1. Familier avec l'API de vue-router et vue-scroller

2. beforeRouteEnter , vous ne pouvez pas accéder à l'instance de vue via cela, vous devez utiliser vm

3.setTimeout 0

Lorsque la version sera publiée la semaine prochaine, je publierai le lien pour que vous puissiez en faire l'expérience Vous trouverez ci-dessous l'effet

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Cliquez sur le numéro de page pour modifier le contenu de la page dans la pagination dans vue.js

Dans le composant vue2.0 Comment implémenter la transmission de valeurs et la communication

Nouvelles fonctionnalités de la version webpack 4.0.0-beta.0 (tutoriel détaillé)

Utilisez SpringMVC pour résoudre la demande de domaine de connexion croisée Vue

Cycle de vie des composants Vue et de la route (tutoriel détaillé)

Implémentation du contrôle des autorisations utilisateur dans Vue2.0

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!