Vue はページの上部にスクロール効果を追加します-jsチュートリアル-php.cn

Vue はページの上部にスクロール効果を追加します

php中世界最好的语言

リリース： 2018-04-11 14:12:41

オリジナル

3270 人が閲覧しました

今回は、Vue でページの一番上のエフェクトにスクロールを追加する方法について説明します。Vue でページの一番上のエフェクトにスクロールを追加するときの注意事項 :見てください。

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

1. 目標:

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

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

。

3. 解決策: 詳細ページに入るときのスクロールページの位置を上部に修正します

4. コードの実装:

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

ログイン後にコピー

内の更新されたライフサイクルについては、次のように記述されます。

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

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

(1)login.vueログイン成功時にsessionStorage

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

ログイン後にコピー

を記述するこれでインターセプターは完成です！

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue プロジェクトで sass 設定を使用する方法

IView で on-change 属性を使用する方法

以上がVue はページの上部にスクロール効果を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。