TabBarのコンポーネント

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/qq_33189961/article/details/98621552

このコンポーネントは、同様のマイクロチャネルクライアント最下位のナビゲーションバーの効果を達成することです

紹介のコンポーネント

でpage.jsonネイティブを使用するように、カスタムタブバーの導入が必要とされていないされていない場合、アセンブリに導入。

{
  "usingComponents": {
    "自定义组件名": "路径"
  }
}
如下：

{
  "usingComponents": {
    "mp-tabbar": "../../components/tabbar/tabbar"  //../是回到上一级目录
  }
}

コンポーネントの使用

直接app.jsonで、wxmlに追加宣言しません

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "icons/iconHome01.png",
        "selectedIconPath": "icons/iconHome02.png"
      },
      {
        "pagePath": "pages/extend/extend",
        "text": "扩展",
        "iconPath": "icons/extend01.png",
        "selectedIconPath": "icons/extend02.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icons/mine01.png",
        "selectedIconPath": "icons/mine02.png"
      }
    ]
  }

次のような効果があります

プロパティリスト

プロパティ	タイプ	デフォルト値	必須の	説明
EXT-クラス	弦		ノー	クラスコンポーネントの内部構造を追加し、構成要素は、内部パターンを修正するために使用することができます
リスト	配列<オブジェクト>		ノー	アイテムのタブバーアレイは、仕様によれば、少なくとも二つのアイテムタブバーであるべきです
現在	数	0	ノー	現在選択されている項目のインデックスタブバー
bindchange	イベントハンドラ		ノー	アイテムがこのイベントをトリガするときタブバー変化が生じ、{インデックス、項目}の詳細は、インデックスは、インデックスタブバーである、項目、構成タブバーに対応する項目であります

属性リストは、フィールドを意味し、タブバーの項目を表し各々がオブジェクトの配列であります

フィールド名	タイプ	必須の	説明
テキスト	弦	それはあります	タイトルTabBarのアイテム
あるIconPath	弦	ノー	タブバー項目アイコン画像のパス、絶対パス、ここで相対コンポーネントディレクトリへの相対パスを使用することが推奨されます。
selectedIconPath	弦	ノー	TabBarの項目を選択すると、アイコン、我々はアセンブリのディレクトリへの絶対パス、相対パスの相対を使用することをお勧めします。
バッジ	弦	ノー	タブバーのかどうかバッジ右上

紹介のコンポーネント

コンポーネントの使用

プロパティリスト

おすすめ