vue3 のストアを使用してスクロール位置を記録する例

vue3 のストアを使用してスクロール位置を記録する例

全体的な効果

ホームページリストをスクロールして詳細ページに入ると、ホームページに戻ったときに以前に閲覧した場所に戻ることができます。

コンテナのスクロールイベントをリッスンする

スクロール イベントを定義し、それをコンテナーのスクロール イベントにバインドします。ここではいくつかの調整を行いました。

定数savePosY = () => {
      if(state.timer) 戻り値;
      state.timer = setTimeout(() => {
        ノードを document.querySelector(".contentWrapper"); にします。
        //スクロール位置を記録するstore.commit("setY",node.scrollTop)
        状態.タイマー = null;
        タイムアウトをクリアします(state.timer);
      },100)

イベントをバインドするためにコンテナをマウントする

マウント時(() => {
    contentWrapper を document.querySelector(".contentWrapper"); とします。
    contentWrapper.addEventListener("スクロール",savePosY);
})

ストア内の構成

ストアは比較的単純で、1つの状態yと突然変異setYのみを含みます。

エクスポートデフォルト{
    州:{
         年:0
    },
    突然変異:
        setY(状態,値){
            状態.y = 値;
        }
    }
}

ページが戻るときのスクロール位置を取得する

また、onMountedで操作しないとコンテナ要素を取得できず、VueのDOMは非同期でレンダリングされるため、有効にするにはnextTickで操作する必要があります。

nextTick(() => { contentWrapper.scrollTop = store.state.y; })

やっと

上記がこの記事の全内容です。何か間違っている点やより良い方法があれば、ぜひご意見をお寄せください。

上記は、vue3 が store を使用してスクロール位置を記録する例の詳細です。vue でスクロール位置を記録する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueのキープアライブはリフレッシュせずにスクロール位置を保持します
  • Vueがスクロール位置を設定できない問題を解決する
  • Vue で詳細ページに入るときにスクロール位置を記憶する方法 (キープアライブ)
  • vue2.0 ルート切り替え後にページスクロール位置が変わらないバグの解決方法
  • Vue スクローラーはスクロール位置を記憶するためにページを返します。サンプルコード
  • スクロール位置を記録するための vue-scroller サンプルコード
  • Vueページの固定スクロール位置の問題を解決する方法

<<:  MySQLにログインする際のエラー「ERROR 1045 (28000)」を解決する方法

>>:  Docker コンテナのログを表示およびクリーンアップする方法 (テスト済みで効果的)

推薦する

CSS3 でテキストマーキーを実装するためのサンプルコード

背景何が起こったかというと、Luzhu は偶然、宇宙で最高の外部スピーカーを備えた携帯電話について知...

MySQL データベースのバックアップ プロセスに関する注意事項

今日は、データ バックアップに関連するいくつかの点について調べ、MySQL データ バックアップに関...

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...

Windows2008 64 ビット システムでの MySQL 5.7 グリーン バージョンのインストール チュートリアル

序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...

純粋な CSS ドロップダウン メニュー

成果を達成する実装コードhtml <div id="コンテナ"> &...

Docker プライベート サーバー イメージを定期的にクリーンアップする方法

CI を利用してリリース用の Docker イメージをビルドすることで、全員のバージョンリリース効率...

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

MySQL データ型の選択原則

目次小さいけれど美しいシンプルにNULL値を避けるデータタイプを選択する手順データ型の紹介1. 文字...

Dockerはターミナルで中国語を入力できない問題を解決します

序文:ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...

ウェブサイトの画像にグレー効果を加える3つの方法

私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...

Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...

MySQL 学習: 初心者のための 3 つのパラダイム

目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...

Windows Server 2016 で Flash を有効にする方法

最近、VMware Horizo​​n を導入してテストしましたが、そのコンソールにはデフォルトで ...

Vue における nextTick の役割といくつかの簡単な使用シナリオ

目的nextTickの役割といくつかの簡単な使用シナリオを理解する文章その機能は何ですか?遅延コール...

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...