私は少し前にモバイルスパプロジェクトを作成しました。このテクノロジーは、vue + vue-router + vuex + mint-ui に基づいています。vue-cli スキャフォールディングの Webpack テンプレートが使用されるため、すべてのページで .vue 拡張子が付いているファイルが使用されます。この記事では主に、vue ルーターが左右のページめくりのトランジション アニメーションの効果を自動的に決定する方法について説明します。
最近會社のプロジェクトは比較的少ないので、vue-router を使用した私の小さな経験をいくつか記録する時(shí)間ができました。
一般的なモバイル ポートのシングルページ アプリケーションには、ページにジャンプするときに対応する遷移アニメーションがあります。
1. 現(xiàn)在の第 1 レベルのページから第 2 レベルのページにジャンプするときに表示する必要がある遷移アニメーションは、第 1 レベルのページが畫面の左側(cè)に移動して消えるときに、 第 2-レベルページが畫面右から左に移動して表示されます。 （本を次のページにめくったときの効果と似ています） 2. 現(xiàn)在の第 2 レベルのページから第 1 レベルのページに戻るときに表示する必要がある遷移アニメーションは、第 2 レベルのページが移動するときです。 畫面の左側(cè)が右に移動して見えます。 (本を前のページに戻す効果) と似ていますしかし、次のような疑問が生じます: 現(xiàn)在のページとジャンプするページの間の階層関係をどのように判斷するか? 私の解決策は、ページ（コンポーネント）を作成するときに、ページを定義するルーターにページのパス（アクセスパス）屬性を設(shè)定して、コンポーネント間の階層関係を區(qū)別することです。 たとえば、第 1 レベルのページ (コンポーネント) 'A' のアクセス パスは '/A' です。彼のセカンダリ ページ 'B' のアクセス パスは '/A/B' です。 その後、ページにジャンプする前に、現(xiàn)在のページとジャンプ先のページのパスの深さを比較して動的に遷移を設(shè)定するだけで済みます。アニメーション。 たとえば、「/A/B」の深さ > 「/A」の深さの場合、ページ B からページ A へのジャンプは効果 2 になります: (本を前のページに戻す効果) .一。まず親ページ home.vue:<!-- keepAlList是用來動態(tài)判斷組件是否需要keep-alive,建議保存到vuex中作為全局變量，至于下方的css動畫，看官可以按照喜好自由修改-->
<transition :name="transNa">
?<keep-alive :include="keepAlList">
?<router-view class="child-view"></router-view>
?</keep-alive>
</transition>
<style scoped>
.child-view?{
?position:?absolute;
?width:?100%;
?height:?100%;
?transition:?all?.5s?ease;
?-webkit-transition:?all?.5s?ease;
?-moz-transition:?all?.5s?ease;
}
.rightin-enter,
.leftin-leave-active?{
?opacity:?0;
?transform:?translate3d(50%?0,?0);
?-webkit-transform:?translate3d(50%,?0,?0);
?-moz-transform:?translate3d(50%,?0,?0);
}
.leftin-enter,
.rightin-leave-active?{
?opacity:?0;
?transform:?translate3d(-50%?0,?0);
?-webkit-transform:?translate3d(-50%,?0,?0);
?-moz-transform:?translate3d(-50%,?0,?0);
}
</style>two。次に、main.js フラグメントを添付します (ページにジャンプする前に遷移アニメーションを動的に設(shè)定するために使用されます) Main.js:
//進(jìn)入路由之前設(shè)置攔截器
let?noLoginList?=?["login",?"register",?"forget",?"home",?"classify",?"goodsDetial"];
router.routeInfo.beforeEach((to,?from,?next)?=>?{
?let?user?=?sessionStorage.getItem('user');
?//如果要去登錄頁面
?if?(noLoginList.indexOf(to.name)?>=?0)?{
??if?(!user?||?user?==?'')?{
???//未登錄的狀態(tài)通行
???next();
???return;
??}?else?{
???if?(["login",?"register",?"forget"].indexOf(to.name)?>=?0)?{
????//已登錄的狀態(tài)去首頁
????next({
?????name:?'home'
????});
????return;
???}?else?{
????//已登錄的狀態(tài)去首頁
????next();
????return;
???}
??}
?}?else?{
??//去登錄頁面以外的頁面(以下是本文關(guān)鍵代碼)
??if?(user?&&?user?!=?'')?{
???//判斷是否為需要緩存組件,如果是添加組件名到數(shù)組
???if?(to.meta.keepAlive)?{
????const?toName?=?to.name;
????let?keepLi?=?store.getters.getKeepAlList;
????keepLi.indexOf(toName)?< 0 ? keepLi.push(toName) : '';
store.commit('SET_KEEPALLIST', keepLi);
}
//根據(jù)路徑名深度設(shè)置轉(zhuǎn)場動畫類型
store.commit('SET_TRANSNA', (to.path.split('/').length < from.path.split('/').length ? 'leftin' : 'rightin'));
next();
} else {
let toWhere = router.nameList.indexOf(to.name) >=?0???to?:?{name:?'home'};
???next({
????name:?'login',
????params:?{
?????jumpTo:?{
??????name:?toWhere.name,
??????params:?toWhere.params,
??????query:?toWhere.query,
?????},
????}
???});
??}
?}
});関連推奨事項(xiàng):
jquery はキーボードの左右のページ回転を?qū)g現(xiàn)しますeffect_jquery
Vueルーターはjqueryとparamsを使用してパラメータを詳細(xì)に渡します
Vueルーターのルーティングパラメータが更新されて消える問題の解決策
以上がvue routerの左右ページめくり遷移アニメーションを自動判定する効果を?qū)g裝する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
左右のイヤホンの見分け方 rl 左右のイヤホンの裝著方法
Feb 22, 2024 pm 05:10 PM
L は左を表し、左耳に著用します。R は右を表し、右耳に著用します。分析 1 通常、イヤホンにはロゴが付いていますが、英語の文字は L と R と略されます。L は left の略で左耳に裝著され、R は right の略で右耳に裝著されます。 R と L でマークされた特定の位置は固定されておらず、特定のヘッドフォンに基づいています。ヘッドフォンによっては R が赤でマークされます。攜帯電話に付屬のヘッドフォンの場合、通常、マイクとボタンがある側(cè)が右側(cè)にあります。補(bǔ)足：ヘッドホンの種類 1 ヘッドホンは人々のポータブルオーディオの象徴です。ヘッドフォンは 2 つの仕様に分類できます。OMTP 仕様は一般に國家標(biāo)準(zhǔn)と呼ばれ、CTIA は一般に國際標(biāo)準(zhǔn)と呼ばれます。イヤホンはエネルギー変換方式に応じて分類されます。具體的には、ダイナミックコイル方式、ムービングアイアン方式、スタティック方式です。
React Router ユーザーガイド: フロントエンドルーティング制御の実裝方法
Sep 29, 2023 pm 05:45 PM
ReactRouter ユーザーガイド: フロントエンドルーティング制御の実裝方法 シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティング ライブラリとして、ReactRouter は豊富な機(jī)能と使いやすい API を提供し、フロントエンド ルーティングの実裝を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具體的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です
消費(fèi)電力のテストと評価 (rx588 の消費(fèi)電力のテストと評価)
Dec 31, 2023 pm 09:38 PM
rx588の消費(fèi)電力は約250Wです。 rx580 で映畫を見ると電力を消費(fèi)しますが、それほど多くはありません。多くのビデオはデコードするためにハードウェアを必要とします。グラフィックカードは多かれ少なかれ使用されます。 xfx Crimson および Dylan Demon + 7700K シングル カードのプラットフォームの消費(fèi)電力は約 380w、7700k は 100w としてカウントされ、他のデバイスを合わせて最大 30w、つまり rx588 の消費(fèi)電力は約 250w、デュアルカードマシンは630wから650wで、700w以上あれば十分ですが、この時(shí)點(diǎn)では電源の負(fù)荷が高すぎるため、壽命に影響します。60％から80％の負(fù)荷に基づいて計(jì)算された理想的な電力供給定格電力は 850 ～ 1000 ワットですが、使用されている CPU の種類とオーバークロックされているかどうかによって異なります。 h61 マザーボードは 588 グラフィックス カードをサポートしていますか? H61 マザーボード自體は
Wordでページをめくる方法
Mar 19, 2024 pm 07:22 PM
Word はよく使われるオフィスソフトの 1 つで、編集した文章の內(nèi)容が長くて読みにくい場合は、Word でページをめくることができます。以下では、編集者が Word でページをめくる方法に関する簡単なチュートリアルを友達(dá)と共有します。これが皆さんのお役に立てば幸いです! 1. まず、コンピューターの Word ソフトウェアで複數(shù)ページの Word 文書を開きます。下の図に示すように: 2. Word インターフェイスのスクロール バーの上向き矢印をクリックして上にスクロールし、ページをめくります。下の図に示すように: 3. ページを下に移動する必要がある場合は、スクロール バーの下矢印をクリックします。下の図に示すように: 4. スクロール バーの矢印をクリックしてページをめくるこの種類のページめくりは、よりカジュアルです。マウスの右ボタンを使用してスクロール バーをクリックし、ページをすばやくめくる必要があります。次のように
Vue Router Lazy-Loading ルーティングの獨(dú)自の利點(diǎn)、ページのパフォーマンスを最適化する方法は?
Sep 15, 2023 am 10:36 AM
VueRouter は、Vue.js によって公式に提供されているルーティング管理プラグインで、Vue アプリケーションでのページ ナビゲーションとルート切り替えの実裝に役立ちます。遅延読み込み機(jī)能は VueRouter 獨(dú)自の利點(diǎn)であり、ページのパフォーマンスを大幅に最適化できます。この記事では、VueRouter の Lazy-Loading ルーティング機(jī)能を紹介し、ページのパフォーマンスを最適化するための実踐的なコード例をいくつか紹介します。必要に応じて遅延読み込みを行う
React Router が表示されない場合はどうすればよいですか?
Dec 30, 2022 am 09:30 AM
ルーターが表示されない場合の解決策: 1. 親ルーティング コンポーネントにbrowserRouterを追加してルーターをラップします; 2. 「this.props.history.go()」を使用してコンポーネントを更新します; 3. 「forcerefresh」をbrowserrouter パラメーターに追加します={true}"; 4. "<Route>" にフック関數(shù)を記述し、このルートから出るときまたはこのルートに入るときに呼び出します。
Router を使用して Vue プロジェクトにリダイレクト機(jī)能を?qū)g裝する方法
Sep 15, 2023 am 08:36 AM
Router を使用して Vue プロジェクトにリダイレクト機(jī)能を?qū)g裝する方法 Vue プロジェクトでは、多くの場合、ページ間のジャンプおよびリダイレクト機(jī)能を?qū)g裝する必要があります。 VueRouter は、シンプルかつ強(qiáng)力なソリューションを提供します。この記事では、Router を使用して Vue プロジェクトにリダイレクト機(jī)能を?qū)g裝する方法と、具體的なコード例を紹介します。 VueRouter のインストール まず、Vue プロジェクトに VueRouter をインストールする必要があります。できる
Vue Router 遅延読み込みルーティング: ページのパフォーマンス向上に役立つトレンド
Sep 15, 2023 am 08:03 AM
VueRouter は、Vue.js フレームワークの公式ルート マネージャーです。これにより、開発者はルート マッピングを通じてページ コンテンツを切り替えることができるため、単一ページ アプリケーションの制御性が向上し、保守が容易になります。ただし、アプリケーションが複雑になるにつれて、ルートの読み込みと解析がパフォーマンスのボトルネックになる可能性があります。この問題を解決するために、VueRouter は、実際に必要になるまでルートの読み込みを延期する、ルートの遅延読み込み機(jī)能を提供します。遅延読み込みは、
