ホームページ > 記事 > ウェブフロントエンド > Vue のスクロール動作の概要
この記事は主に Vue のスクロール動作を紹介するもので、編集者が非常に優れていると思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
スクロール動作
ルーティングのスクロール動作とは何ですか
新しいルートに切り替えるとき、ページをリロードするのと同じように、ページを一番上までスクロールするか、元のスクロール位置を維持する必要があります
注: この機能は HTML5 履歴モードでのみ利用可能です。このモードでは、サービスを開始する必要があります
スクロールのルーティングを行うには、scrollBehavior メソッドを使用します
scrollBehavior メソッドは、ルーティング オブジェクトとの間で受信を行います。 3 番目のパラメーター SavedPosition は、popstate ナビゲーション (ブラウザーの「進む/戻る」ボタンによってトリガーされる) のときにのみ使用できます。
の効果を理解するために、以下の小さなケースを実行してみましょう
<p id="app"> <h1>滚动行为</h1> <ul> <li><router-link to="/">首页</router-link></li> <li><router-link to="/foo">导航</router-link></li> <li><router-link to="/bar">关于</router-link></li> <li><router-link to="/bar#an1">红色页面</router-link></li> <li><router-link to="/bar#an2">蓝色页面</router-link></li> </ul> <router-view></router-view> </p> <script> var Home = { template:"<p>home</p>" } var Foo = { template:"<p>foo</p>" } var Bar = { template: ` <p> bar <p style="height:500px;background: yellow;"></p> <p id="an1" style="height:500px;background: red;">红色页面</p> <p id="an2" style="height:300px;background: blue;">蓝色页面</p> </p> ` } var router = new VueRouter({ mode:"history", //控制滚动位置 scrollBehavior (to, from, savedPosition) { //判断如果滚动条的位置存在直接返回到当前位置,否者返回到起点 if (savedPosition) { return savedPosition } else { if (to.hash) { return {selector: to.hash} } } }, routes:[ { path:"/",component:Home }, { path:"/foo",component:Foo }, { path:"/bar",component:Bar } ] }); var vm = new Vue({ el:"#app", router }); </script>
関連する推奨事項:
以上がVue のスクロール動作の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。