vue ページがスクロール ページに切り替わり、先頭の example_vue.js が表示されます

以下に、vue ページをスクロールページ表示の最上部に切り替える例を紹介します。これは良い参考値であり、皆さんの役に立つことを願っています。

mint UIを使用して携帯端末の「リストビュー」から詳細ページにジャンプするように記述すると、詳細ページは携帯電話の高さよりも大きいため、「リストビュー」をクリックしてリストをスクロールすると、スクロールできます。詳細ページに入ると、上から詳細ページが表示されないことがわかります。

1. 目標:

「listview」 詳細ページに入ると、ページ上部から詳細ページが表示されます。

2番目に、最初に次の2つのページのscrollYを確認します。それらは毎回異なり、リストビューと詳細ページの間のscrollYの間にパターンはありません

解決策のアイデアは3つあります。 詳細ページに入ると、スクロールするページの位置が上部に固定されます

4. コード実装: vue は次のように記述されます 更新されたライフサイクルについては

updated() { 
    window.scroll(0, 0); 
  }

5. の問題は解決されましたが、ネットワークが遅い場合、ページの下から上にスクロールするプロセスがあまり美しくないことがわかります。この問題については、マスクを追加できます。 6.

ログイン ページからメイン ページに入る Vue のインターセプターを作成する方法を共有します

(1) ログイン時に sessionStorage に保存します。 .vue ログインは成功しました

sessionStorage.setItem('isLogin', true)

(2) Router で、index.js に

router.beforeEach((to, from, next) => {//  '/'是登陆页面的路由
 if (to.path == '/') {
  sessionStorage.removeItem('isLogin');
 }
 let user = JSON.parse(sessionStorage.getItem('isLogin'));
 if (!user && to.path != '/') {
  next({ path: '/' })
 } else {
  next()
 }
})

と書いてインターセプタを完成させます！

上記は私があなたのためにまとめたものです。

関連記事:

VueページのDOM操作が反映されない問題を解決

nodejsで超簡単なQRコード生成方法を実装

nodejs+mongodb集約カスケードクエリ操作例

以上がvue ページがスクロール ページに切り替わり、先頭の example_vue.js が表示されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。