VUE知識は、対応するアイコンの実現ジャンプをクリックを達成-TabBar

タブバー：フォルダ内のsrc /コンポーネントの新

TabBar.vueとTabBarItem.vue：Vueがフォルダ内の2つのファイルを作成します

1、TabBar.vueファイル内：設定タブバーのスタイル
　　<テンプレート>

　　　　<のdivのid = "タブ・バー">

　　　　　　<スロット> </スロット>

　　　　</ div>

　　</テンプレート>

　　<スクリプト>

　　　　輸出のデフォルト{

　　　　　　名前： "TabBarに"

　　　　}

</ SCRIPT>

　　<スタイルは、スコープ>

＃タブバー{ 
  表示：フレックス。
  背景色：＃f6f6f6; 

  位置：固定; 
  左：0; 
  右：0; 
  下：0; 

  ボックスシャドウ：0 -1px 1ピクセルRGBA（100,100,100、.1）。
}

　　</スタイル>

2、TabBarItem.vue：セットスタイルと各カテゴリの他の方法

　　スロット名前付き：使用中の名前を追加する必要がある場合

<テンプレート>

　　<クリック=「によってitemClick」@のdivクラス=「タブ・バー・アイテム」>

　　　　<divのV-IF = "！のisActive">　　

　　　　　　<スロット名=「項目アイコン」> </スロット>

　　　　</ div>

　　　　<divのV-ELSE>

　　　　　　<スロット名=「項目アイコン活性」> </スロット>

　　　　</ div>

　　　　<DIV：クラス= "{アクティブ：のisActive}">

　　　　　　<スロット名=「項目テキスト」> </スロット>

　　　　</ div>

</テンプレート>

<スクリプト>

　　輸出のデフォルト{

　　　　名前： "TabBarItem"、

　　　　小道具：{

　　　　　　パス：文字列、

　　　　}、

　　　　データ（）{

　　　　　　リターン{

　　　　　　　　isActive：真

　　　　　　}

　　　　}、

　　　　方法：{

　　　　　　itemClick（）{

　　　　　　　　この。$のrouter.push（this.path）

　　　　　　}

</ SCRIPT>

<スタイルは、スコープ>

.TABバー項目{ 
  フレックス：1。
  テキスト整列：センター; 
  高さ：49px; 
} 
.TABバー項目IMG { 
  マージントップ：3px。
  幅：18px; 
  高さ：18px; 
  垂直整列：中央; 
  マージン下：2ピクセル。
} 
.active { 
  色：赤。
}

</スタイル>

3、App.vue中に引用：

　　<テンプレート>

　　　　　　<ルータビュー> </ルータビュー>

<タブバー> 
    <タブバー項目パス= "/ホーム"> 
      <IMGスロット= 'アイテムのアイコン' SRC = "./資産/ IMG /タブバー/首页の.svg" ALT = ""> 
      <IMGスロット= '項目アイコンアクティブ' SRC = "./資産/ IMG /タブバー/ home_active.svg" ALT = ""> 
      <DIVスロット= "項目テキスト">首页</ div> 
    </タブバー項目> 
    <タブバー項目パス= "/カテゴリ"> 
      <IMGスロット= 'アイテムアイコン' SRC = "./資産/ IMG /タブバー/分类.SVG" ALT = ""> 
      <IMGスロット= 'アイテム-はアイコン-アクティブ」SRC = "./資産/ IMG /タブバー/ goods_active.svg" ALT = ""> 
      <divのスロット= "項目テキスト">分类</ DIV> 
    </タブバー項目> 
    <タブバー項目パス= "/カート"> 
      <IMGスロット= 'アイテムアイコン' SRC = "./資産/ IMG /タブバー/购物车空.SVG" ALT = "">
      <IMGスロット= 'アイテム・アイコン・アクティブ' SRC = "./資産/ IMG /タブバー/ shopcart_active.svg" ALT = ""> 
      <divのスロット= "項目テキスト">购物车</ DIV> 
    </タブ-bar項目> 
    <タブバー項目パス= "/プロファイル"> 
      <IMGスロット= 'アイテムアイコン' SRC = "./資産/ IMG /タブバー/我的.SVG" ALT = ""> 
      <IMGスロット= 'アイテム・アイコン・アクティブ' SRC = "./資産/ IMG /タブバー/ mine_active.svg" ALT = ""> 
      <divのスロット= "項目テキスト">我的</ DIV> 
    </タブバー-item> 
  </タブ・バー>

　　</ div>

　　</テンプレート>

　　<スクリプト>

　　　　「./compnents/tabbar/TabBar.vue」からの輸入のTabBar

　　　　「./components/tabbar/TabBarItem.vue」からインポートTabBarItem

　　　　輸出のデフォルト{

　　　　　　名前：「アプリケーション」、

　　　　　　成分：{　　

　　　　　　　　タブ、

　　　　　　　　TabBarItem

　　　　　　}

　　</ SCRIPT>

　　<スタイル>

　　　　@import URL（」./資産/ CSS / base.css'）

　　</スタイル>

VUE知識は、対応するアイコンの実現ジャンプをクリックを達成-TabBar

おすすめ