スクロール位置を記録する vue-scroller のコードの紹介

この記事では主にスクロール位置を記録するための vue-scroller のサンプルコードを紹介します。内容が非常に優れているので、参考として共有します。

問題の説明:

リストページが詳細ページに入るか、タブページに切り替わり、前のスクロール位置に切り替えようとしてリストページに戻ります

問題の解決策:

他のページに切り替える前の位置を記録し、一覧ページに戻るときにその位置に戻ります。これは、vue-router beforeRouteEnter と beforeRouteLeave の 2 つのフックを使用して実現する必要があります。

vue-scroller.min に幅と高さがゼロではないという判定を追加する方法もあります。 .js ソース コード。最近のコードの最適化中に発見された実装メソッドのコメントを参照してください。

コード部分:

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

},

注意点:

1. vue-router と vue-scroller の API を理解してください。2. これを介して vue インスタンスにアクセスすることはできません。 vmを使用する必要があります

3.setTimeout 0

来週バージョンがリリースされたら、効果を体験できるようにリンクを投稿します

上記がこの記事の全内容です。お役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Angular での better-scroll プラグインの使用方法の概要

Vue の .sync 修飾子の使用方法を理解する方法

Vue のドラッグ アンド ドロップ コンポーネントの開発の概要

以上がスクロール位置を記録する vue-scroller のコードの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。