はじめに:ナビゲーション バーなどのコンポーネント ベースのアイデアを使用して機能モジュールを完全にカプセル化すると、開発アイデアと効率の両方に多くの利点があります。開発では、コンポーネント ベースの開発アイデアを可能な限り使用し、すべてのコードを同じ .vue ファイルに記述しないようにする必要があります。これにより、コードの可読性が大幅に向上します。 ナビゲーションバーのカプセル化 主なアイデアは、赤い部分をコンポーネントとして扱うことです。赤い部分は画像とテキストが異なるだけなので、同じコンポーネントにカプセル化し、画像情報とテキスト情報をコンポーネントに渡します (スロットを使用できます)。 //タブバーアイテム.vue <テンプレート> <div class="tabBarItem" @click="tabBarItemClick"> <div v-if="!isActive"> <スロット名="アイテムアイコン"></スロット> </div> <div v-else> <スロット名="アイテムアイコンアクティブ"></スロット> </div> <div:style="isActiveColor"> は、 <スロット名="アイテムテキスト"></スロット> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:"タブバーアイテム", 小道具:{ パス:文字列、 アクティブカラー:{ タイプ:文字列、 デフォルト:"ピンク" } }, 計算:{ アクティブ:{ 得る(){ this.$route.path.indexOf(this.path)!==-1 を返します。 }, セット(){} }, isActiveColor(){ this.isActive?{color:this.activeColor}:{} を返します。 } }, 方法:{ タブバーアイテムクリック(){ this.$router.push(this.path); } } } </スクリプト> <スタイルスコープ> .tabBarItem{ フレックス: 1; フォントサイズ: 12px; } .tabBarItem画像{ 上マージン: 3px; 幅: 24px; パディング下部:3px; } </スタイル> 次のステップは、これら 4 つのオプションを同じ場所に配置するコンテナーをカプセル化することです。 //タブバー.vue <テンプレート> <div class="tabBar"> <スロット></スロット> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:"タブバー" } </スクリプト> <スタイルスコープ> .タブバー{ ディスプレイ: フレックス; 高さ: 49px; 位置: 固定; 左: 0; 右: 0; 下部: 0; テキスト配置: 中央; ボックスの影: 0px -1px 1px rgba(100, 100, 100, .1); 背景色: #f6f6f6; } </スタイル> 次のステップでは、これを使用して、それぞれの TabBarItem スロットに異なる画像とテキスト情報を書き込むことです。 //メインタブバー.vue <テンプレート> <div class="mainTabBar"> <タブバー> <タブバー項目パス="/home" activeColor="#ff8198"> <img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon"> <img src="~assets/img/tabbar/home_active.svg" alt="" slot="item-icon-active"> <div slot="item-text">ホーム</div> </タブバー項目> <タブバー項目パス="/カテゴリ" activeColor="#ff8198"> <img src="~assets/img/tabbar/category.svg" alt="" slot="item-icon"> <img src="~assets/img/tabbar/category_active.svg" alt="" slot="item-icon-active"> <div slot="item-text">カテゴリー</div> </タブバー項目> <タブバーアイテムパス="/カート" activeColor="#ff8198"> <img src="~assets/img/tabbar/shopcart.svg" alt="" slot="アイテムアイコン"> <img src="~assets/img/tabbar/shopcart_active.svg" alt="" slot="item-icon-active"> <div slot="item-text">ショッピングカート</div> </タブバー項目> <タブバー項目パス="/プロファイル" activeColor="#ff8198"> <img src="~assets/img/tabbar/profile.svg" alt="" slot="item-icon"> <img src="~assets/img/tabbar/profile_active.svg" alt="" slot="item-icon-active"> <div slot="item-text">マイ</div> </タブバー項目> </タブバー> </div> </テンプレート> <スクリプト> 「components/common/tabbar/TabBar」からTabBarをインポートします。 「components/content/tabbar/TabBarItem」からTabBarItemをインポートします。 エクスポートデフォルト{ 名前:"メインタブバー", コンポーネント:{ タブバー、 タブバーアイテム } } </スクリプト> <スタイル> </スタイル> ナビゲーションバーは一般的にホームページで使用されるため、このナビゲーションバーをApp.vueに配置します。 <テンプレート> <div id="アプリ"> <メインタブバー></メインタブバー> </div> </テンプレート> <スクリプト> 「components/content/tabbar/MainTabBar」からMainTabBarをインポートします。 エクスポートデフォルト{ 名前: 'アプリ'、 コンポーネント:{ メインタブバー } } まとめ:ナビゲーション バーを書くのに 3 つのファイルを使用するようです。面倒に思えるかもしれませんが、コードの可読性が大幅に向上します。プロジェクトの他の場所でナビゲーション バーを使用する必要がある場合は、MainTabBar に似たファイルを作成し、必要な画像とテキストをその中に書き込むだけです。他のプロジェクトで使用する場合でも、ファイルを直接コピーして直接使用できます。CSS スタイルを記述する必要さえないため、開発効率が大幅に向上します。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ルートパスワードエラー番号 1045 の解決方法
>>: Dockerコンテナのホスト間マルチネットワークセグメント通信ソリューションの詳細説明
高性能で軽量なウェブサービスソフトウェアであるNginxについて高い安定性 システムリソースの消費量...
transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...
目次レムフォルクスワーゲンサードパーティのUIフレームワークに適応する結論モバイル開発における最も一...
mysqldump ツールのバックアップデータベース全体をバックアップする $> mysqld...
1. MySQLをインストールするこの記事はAPT経由でインストールされており、インストールされてい...
目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...
成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーショ...
目次デモ1フラグメントの作成スヴェルトコンポーネント状態を変更できるデモSvelte は長い間存在し...
1. Object.create() メソッドを使用して新しいオブジェクトを作成し、既存のオブジェク...
導入保存時と読み取り時に CHAR 型と VARCHAR 型の違いを本当にご存知ですか?まずいくつか...
この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...
1. 縦型テーブルと横型テーブル垂直テーブル: テーブル内のフィールドとフィールド値はキーと値の形式...
序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...