vueを使用してナビゲーションバーを実装する方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-20 18:29:28

オリジナル

5182 人が閲覧しました

この記事では主に、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="isSelect === item.title ? item.url1 : item.url" 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: &#39;银行&#39;,
footNav: [{title: &#39;银行&#39;, url: &#39;../../../static/baiduMap/23@2x.png&#39;, url1: &#39;../../../static/baiduMap/22@2x.png&#39;},
 {title: &#39;公交 &#39;, url: &#39;../../../static/baiduMap/11@2x.png&#39;, url1: &#39;../../../static/baiduMap/10@2x.png&#39;},
 {title: &#39;地铁 &#39;, url: &#39;../../../static/baiduMap/13@2x.png&#39;, url1: &#39;../../../static/baiduMap/12@2x.png&#39;},
 {title: &#39;教育 &#39;, url: &#39;../../../static/baiduMap/15@2x.png&#39;, url1: &#39;../../../static/baiduMap/14@2x.png&#39;},
 {title: &#39;医院 &#39;, url: &#39;../../../static/baiduMap/17@2x.png&#39;, url1: &#39;../../../static/baiduMap/16@2x.png&#39;},
 {title: &#39;休闲 &#39;, url: &#39;../../../static/baiduMap/19@2x.png&#39;, url1: &#39;../../../static/baiduMap/18@2x.png&#39;},
 {title: &#39;购物 &#39;, url: &#39;../../../static/baiduMap/21@2x.png&#39;, url1: &#39;../../../static/baiduMap/20@2x.png&#39;}
]

ログイン後にコピー

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

rreee

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