So markieren und zeichnen Sie die Bildlaufposition im Vue-Scroller auf

In diesem Artikel wird hauptsächlich der Beispielcode für Vue-Scroller zum Aufzeichnen der Bildlaufposition vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

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 der API von Vue-Router und Vue-Scroller

2. Dadurch ist es nicht möglich, auf die Vue-Instanz zuzugreifen. Sie müssen vm verwenden

3.setTimeout 0

Wenn die Version nächste Woche veröffentlicht wird, werde ich den Link veröffentlichen und Sie können das erleben Wirkung.

Ich habe das oben Gesagte für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Klicken Sie auf die Seitenzahl, um den Seiteninhalt beim Paging in vue.js zu ändern

In der vue2.0-Komponente So implementieren Sie Wertübergabe und Kommunikation

Neue Funktionen der Webpack 4.0.0-Beta.0-Version (ausführliches Tutorial)

Verwenden Sie SpringMVC, um Vue-Querverbindungsdomänenanfrage lösen

Lebenszyklus von Vue-Komponenten und Route (ausführliches Tutorial)

Implementierung der Benutzerberechtigungskontrolle in Vue2.0

Das obige ist der detaillierte Inhalt vonSo markieren und zeichnen Sie die Bildlaufposition im Vue-Scroller auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!