皆さんこんにちは。私は csdn のブロガーです: lqj_ 自身

これは私の個人的なブログのホームページです。

lqj_I_Python 人工知能ビジョン (opencv) 入門から実戦まで、フロントエンド、WeChat アプレット - CSDN ブログ

最新のuniapp卒業デザインコラムも以下に掲載しています。

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

普段Bilibili動画でよく使っていることについても解説していきますので、

ビリビリへようこそ:

Lu Miaoer の個人スペース-Lu Miaoer の個人ホームページ-哔哩哔哩ビデオ

スクロール動作

vue-routerルートが切り替わったときのページのスクロール方法をカスタマイズできます。たとえば、新しいルートにジャンプすると、ページは特定の位置までスクロールし、ルートを切り替えると、ページは前のスクロール位置に戻ります。

ルーティングインスタンスを作成するときは、scrollBehaviorメソッドを指定するだけで済みます。

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior関数はオブジェクトを受信しtoて fromルーティングします。3 番目のパラメータは、savedPositionこれがナビゲーション (ブラウザの戻る/進むボタンを押すか、メソッドを呼び出す)の場合にのみpopstate使用できます。router.go()

一定の距離までスクロールします

この関数はScrollToOptions位置オブジェクトを返すことができます。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})

要素の位置までスクロールします

elを介して CSS セレクターまたは DOM 要素を渡すこともできます。この場合、topおよびはleft要素への相対オフセットとして扱われます。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终在元素 #main 上方滚动 10px
    return {
      // 也可以这么写
      // el: document.getElementById('main'),
      el: '#main',
      top: -10,
    }
  },
})

アンカー位置までスクロールします

「アンカーまでスクロール」をシミュレートすることもできます。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
      }
    }
  },
})

前の位置までスクロールする

Back savedPosition、ブラウザ后退/前进ボタンが押されるかrouter.go()メソッドが呼び出されると、ページは前のスクロール位置に戻ります。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

ヒント: 偽の値、または空のオブジェクトが返された場合、スクロールは行われません。返されたオブジェクトに追加して、behavior: 'smooth'スクロールをよりスムーズにすることもできます。

遅延スクロール

場合によっては、スクロール動作をすぐに実行したくない場合があります。たとえば、ページに遷移アニメーションがある場合、遷移が終了した後にスクロールを実行したいとします。これを行うには、Promise を返すことができます。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ left: 0, top: 0 })
      }, 500)
    })
  }
})

VUE フレームワーク: vue2 ～ vue3 の包括的な詳細まとめ (4) スクロール動作