vueを使用してナビゲーションバーを実装する方法

この記事では主に、vue プロジェクトでのナビゲーション バーの実装方法を詳しく紹介します。興味のある方は参考にしてください。

すべての Web ページ プロジェクトには、基本的に独自のメソッドが必要です。上記はすべて書くことができます。しかし、より少ないコードで冗長性の低いコードを書きたい場合は、頭を使って考える必要があります。

最近、Baidu Maps 用のプロジェクトを書きましたが、これには下部にナビゲーション バーが必要です。詳細は以下の通りです:

まず、下部のナビゲーションバーにあるすべてのアイコン画像を取得します。 画像には 2 種類があります。灰色のものは未選択のものを表し、選択されたものはサンプル色の画像に置き換えられます。

まず、コンポーネント内の HTML 構造を見てみましょう。vue が提供する v-for メソッドを使用して、footNav 配列を走査して表示します。配列には、{title: "Bank"、url: " "、url1: " "} が含まれており、画像の src を isSelect にバインドし、現在のタイトルと等しいかどうかを判断して、現在のナビゲーションを選択して表示します。選択時の画像 URL1。

<p class="footer">
 <ul>
 <li v-for="item in footNav" @click="selectMapNav(item.title)">
  <img src="/static/imghwm/default1.png"  data-src="isSelect === item.title ? item.url1 : item.url"  class="lazy"  : alt="">
  <p>{{item.title}}</p>
 </li>
 </ul>
</p>

スタイルは拡張言語で書かれていないため、誰でも理解できるはずです。単純にネストされているだけです。この領域に 100% の幅と固定の高さを追加します。下部に表示する必要があるため、固定の位置と背景色を追加します。私はモバイル プロジェクトを作成していますが、ブラウザは比較的新しいため、互換性の問題を考慮する必要はありません。大胆なフレックス レイアウトにより、ナビゲーション バーを簡単に実装できます。

.footer ul{
 width:100%;
 height:50px;
 position:fixed;
 bottom:0;
 z-index:1;
 background-color:#fff;
 display:flex;
 li{
 text-align:center;
 flex:1;
 img{height:23px;width:23px;margin-top:5px;}
 p{font-size:0.1rem;height:15px;line-height:10px;}
 }
}

vue data() に配列を定義します。この配列には、「Bank」などの各ナビゲーションのタイトル、非選択時に表示される画像 URL、選択時に画像 URL1 が格納されます。 isSelect は現在選択されているバンクを示し、デフォルトではバンクが選択されています。

isSelect: '银行',
footNav: [{title: '银行', url: '../../../static/baiduMap/23@2x.png', url1: '../../../static/baiduMap/22@2x.png'},
 {title: '公交 ', url: '../../../static/baiduMap/11@2x.png', url1: '../../../static/baiduMap/10@2x.png'},
 {title: '地铁 ', url: '../../../static/baiduMap/13@2x.png', url1: '../../../static/baiduMap/12@2x.png'},
 {title: '教育 ', url: '../../../static/baiduMap/15@2x.png', url1: '../../../static/baiduMap/14@2x.png'},
 {title: '医院 ', url: '../../../static/baiduMap/17@2x.png', url1: '../../../static/baiduMap/16@2x.png'},
 {title: '休闲 ', url: '../../../static/baiduMap/19@2x.png', url1: '../../../static/baiduMap/18@2x.png'},
 {title: '购物 ', url: '../../../static/baiduMap/21@2x.png', url1: '../../../static/baiduMap/20@2x.png'}
]

methodsメソッドにはhtmlで呼び出されるイベントを書きます。 HTML構造層のクリックイベントselectMapNav(item.title)により、渡されたタイトルをisSelectに代入し、ナビゲーションバーのクリック状態の変化を実現します。

rreee

最終結果を見てみましょう、完璧です。

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

angularjsのscopeスコープの解説

JavaScriptで高パフォーマンスなロードオーダーを実装する方法

axiosでグローバル登録を実装する方法

Vue+を使って実装する方法Flask ログイン検証ジャンプ (詳細なチュートリアル)

以上がvueを使用してナビゲーションバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。