Introduction au code de vue-scroller pour enregistrer la position de défilement

Cet article présente principalement l'exemple de code pour vue-scroller pour enregistrer la position de défilement. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner 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 du 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. Lorsque vous utilisez l'API de 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 est. sorti la semaine prochaine, je publierai un lien pour que vous puissiez découvrir l'effet

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, s'il vous plaît. faites attention au réseau chinois PHP !

Recommandations associées :

Introduction à la méthode d'utilisation du plug-in better-scroll dans Angular

Comment comprendre la modification .sync de Vue L'utilisation de symboles

Introduction au développement des composants glisser-déposer de Vue

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!