基本的な機能をアプレット - カスタムタブバー

カスタムタブバー

インフラストラクチャライブラリ2.5.0が作られる低バージョンをサポートするために開始したプロセスとの互換性。

カスタムタブバーは、よりパーソナライズされたシーンを満たすためにTabBarのスタイルを設定することで、開発者がより柔軟に行うことができます。

カスタムモードタブバーで

• 互換性とページがタブページを区別低いバージョンを確保するためには、タブバー関連の設定文を完了するために必要なアイテムが、これらのフィールドは、カスタムタブバーのレンダリングに作用しないでしょう。
• この時点で、開発者はカスタムコンポーネントのレンダリングによってTabBarに、すべてのTabBarスタイルをレンダリングするためのカスタム・コンポーネントを提供する必要があります。お薦めの下部に固定  カバービュー  +  カバー画像  TabBarのレベルを確保するために、レンダリングスタイルの部品は比較的高いです。
• TabBarのスタイルは、次のようなインターフェースに関連付けられた  wx.setTabBarItem  の障害などがあります。
• 成分タブバーカスタムタブページの例は、それぞれ異なっている、で自己集合によって定義することができる  getTabBar インターフェースは、現在のページから得られたタブバーコンポーネントインスタンスを定義しました。

注意：状態を選択し、タブを達成するために、現在のページに、によって  getTabBar コンポーネントのインスタンスを取得し、setDataメソッドは、選択された状態を更新呼び出します。サンプルコードの缶底。

プロセスを使用してください

1.設定情報

• で   指定されたアイテム   のフィールドを、残りの間、   構成もそれ完了です。app.jsontabBarcustomtabBar
• 宣言する必要があるすべてのタブページJSON  usingComponents であってもよいアイテムを  app.json 世界的に開いています。

例：

{
   " タブバー" ：{
     " カスタム"：真、
     " 色"：" ＃000000 " 、
     " selectedColor "：" ＃000000 " 、
     " backgroundColorの"：" ＃000000 " 、
     " リスト" ：[{
       " pagePath "：" ページ/コンポーネント/インデックス」、
      「テキスト」：" 组件" 
    }、{ 
      " pagePath "：" ページ/ API /インデックス" 、
       " テキスト"：" 接口" 
    }] 
  }、
  " usingComponents " ：{} 
}

2.コードファイルにタブバーを追加します。

ルートディレクトリ内のコード入力ファイルを追加します。

カスタムタブバー/ index.js 
カスタム -tab-バー/ index.json 
カスタム -tab-バー/ index.wxml 
カスタム -tabバー/ index.wxss

3.コードのTabBarを書きます

カスタムコンポーネントを作成する方法は、完全にレンダリングされたカスタムコンポーネントは、タブバーを引き継ぎます。さらに、新たなカスタム・コンポーネントの  getTabBar 現在のページで定義タブバーコンポーネントインスタンスから使用可能なインターフェイス。

 

 

 

 

 

。