Einführung in den Code für vue-scroller zum Aufzeichnen der Bildlaufposition

In diesem Artikel wird hauptsächlich der Beispielcode für Vue-Scroller zum Aufzeichnen der Bildlaufposition vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Problembeschreibung:

Die Listenseite wechselt zur Detailseite oder wechselt zur Registerkartenseite und kehrt dann zur Listenseite zurück, in der Hoffnung, zum vorherigen Scrollen zu wechseln Position

Ideen zur Lösung des Problems:

Notieren Sie die Position, bevor Sie zu anderen Seiten wechseln, und kehren Sie zur Position zurück, wenn Sie zur Listenseite zurückkehren. Dies muss mithilfe der Hooks beforeRouteEnter und beforeRouteLeave des Vue-Routers erreicht werden.

Es gibt auch eine einfachere und grobere Methode. Fügen Sie eine Beurteilung hinzu, dass die Breite und Höhe im Vue-Scroller nicht Null sind. min.js-Quellcode. Siehe die Kommentare zur Implementierungsmethode, die während der letzten Codeoptimierung entdeckt wurde.

Codeteil:

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

},

Zu beachtende Punkte:

1. Vertraut mit Vue-Router und Vue -Scrollers API

2.beforeRouteEnter, Sie können hierüber nicht auf die Vue-Instanz zugreifen, Sie müssen vm verwenden

3.setTimeout 0

Warten Sie einen Moment, wenn die wöchentliche Version Sobald es veröffentlicht ist, werde ich einen Link veröffentlichen, damit Sie die Wirkung erleben können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Einführung in die Methode zur Verwendung des Better-Scroll-Plug-Ins in Angular

Anleitung Verstehen Sie die .sync-Modifikation von Vue. Die Verwendung von Symbolen

Einführung in die Entwicklung von Vue-Drag-and-Drop-Komponenten

Das obige ist der detaillierte Inhalt vonEinführung in den Code für vue-scroller zum Aufzeichnen der Bildlaufposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!