マイクロチャネルアプレット - カスタムメニュータブバー

まず、グローバルコンフィギュレーション

設定ページ、usingComponentsタブバーと内部app.json

"ページ"：[ 
    "ページ/ページ1 /インデックス"、
    "ページ/ページ2 /インデックス"、
    "ページ/ PAGE3 /インデックス"、
    "ページ/ page4 /インデックス"、
    "ページ/ PAGE5 /インデックス" 
]、
"usingComponents"： { 
    "UM-タブバー"： "/コンポーネント/ UM-タブバー/インデックス" 
}、
"タブバー" { 
    "のborderStyle"： "白"、
    "リスト"：[ 
      { "pagePath"： "ページ/ページ1 /インデックス"} 、
      { "pagePath"： "ページ/ PAGE2 /インデックス"}、
      { "pagePath"： "ページ/ page4 /インデックス"}、
      { "pagePath"： "ページ/ PAGE5 /インデックス"} 
     ] 
}

注意：

1は、リストがダウンここでタブバーが呼び出されませんwx.switchTab方法から内部のジャンプページのパス、またはカスタムコンポーネントを設定する必要があります

、あなたはJSONファイル参照ページ内のconfigure usingComponentsに必要なグローバルusingComponents設定なし2、

第二に、二価の基カスタム

コンポーネント/ UM-タブバーのディレクトリ

1アイコン（自分のアイコンのリソースを格納するディレクトリは、また、プロジェクト資産のディレクトリに配置することができます）

2、index.wxml

< ビュークラス= 'ボックスタブバー' スタイル= '高さ：{{tabHeight}} RPX;' > 
　　< ビューWXのための：= "{{タブ}}" WX：キー= "{{item.content}}" クラス= 'アイテム' bindtap = 'handleClick' データ・インデックス= '{{索引}}' >       
　　　　< 画像SRC = '{{（activeIndex ==インデックス）item.activeImg：item.inactiveImg}}' WX：もし= "{{item.activeImg}}" > </ 画像> 
　　　　< ビューWX：もし= "{{ item.content}} " スタイル="色：
　　　　　　{{item.content}} 
　　　　</ ビュー>  
　　</ ビュー> 
　　<！ - 特殊图标- > 
　　< 画像SRC '/アイコン/ tab3.png' = クラス= 'アイコンTAB3' bindtap = 'handleClickMid' > </ 画像> 
</ ビュー>

3、index.wcss（定義可能なスタイル、ここでは追加されません）

4、index.js

コンフィグ=定数（ 'config.jsの./'）必要
CONST = getAppアプリ（）
成分（{ 
  プロパティ：{ 
    activeIndex：{ 
      タイプ：ナンバー、
      値:. 1は、
    }、
  }、
  問題// IOS、二つの隠れがあります元TabBarの上
  に作成（）{ 
    wx.hideTabBar（{ 
      ：falseに、aniamtion 
      失敗（）{ 
        たsetTimeout（関数（）{ 
          wx.hideTabBar（{aniamtion：偽へ}）
        }、500）
      } 
    }）
  }、
  READY（）{ 
    この_this = CONST 
    // X適合タブバーiPhone高
    wx.getSystemInfo（{ 
      成功（RES）{ 
        CONST = res.modelモデル
        （model.search（ 'iPhone X'）！= -1 ||場合
　　　　　　  model.search（ 'iPhone 11'）！= -1 || 
　　　　　　  model.search（ '不明< iPhone12 、1 > '）！= -1）
　　　　　{ 
          _this.setData（{ 
            tabHeight：150 
          }）
        } 
      } 
    }）
    wx.hideTabBar（{ 
      ：aniamtion偽は、
      {（フェイル）
        のsetTimeout（関数（）{ 
          wx.hideTabBar（{aniamtion：偽を}）
        }、500）
      } 
    } ）
  }、

  データ：設定、

  方法：{ 
    handleClick（E）{
      CONST IDX = e.currentTarget.dataset.index 
      IF（IDX == this.data.activeIndex）のリターン; 
      CONST URL = this.data.tabs [IDX】た.url 
      wx.switchTab（{ 
        URL 
      }）
    } 
  } 
}）

注：wx.hideTabBarメソッドを呼び出すには、タブバーを隠す上で定義されます

5、index.json

{ 
  "コンポーネント"：真
}

6、config.jsの

module.exportsは= { 
  tabHeight：100、
  tabStyle：{ 
    activeColor： '＃333'、
    inactiveColor '#CCC' 
  }、

  タブ：[ 
    { 
      "コンテンツ"： "TAB1"、
      "activeImg"：」./icons/tab1 -on.png " 
      "inactiveImg"：" ./icons/tab1-off.png " 
      "URL"： "/ページ/ページ1 /インデックス" 
    }、
    { 
      "コンテンツ"： "TAB2"、
      "activeImg"：" "./icons/tab2-on.png 
      "：" ./icons/tab2-off.png」、inactiveImg" 
      "URL"： "/ページ/ページ2 /インデックスが" 
    }、
    { 
      "コンテンツ"： "TAB3"、
      "activeImg"： "./icons/tab3.png"、
      "inactiveImg"： "./icons/tab3.png"、
      "URL"： "/ページが/ PAGE3 /インデックス" 
    }、
    { 
      "内容"： "TAB4"、
      "activeImg"： "./icons/tab4-on.png"、
      "inactiveImg"： "./icons/tab4-off.png"、
      "URL"：「/ページ/ page4 /インデックス" 
    }、
    { 
      "コンテンツ"： "tab5"、
      "activeImg"：" ./icons/tab5-on.png " 
      "inactiveImg"：" ./icons/tab5-off.png」、
      "URL"： "/ページ/ PAGE5 /インデックス" 
    }、
  ]、
}

第三に、ページコンポーネントの導入

それぞれtab1の、TAB2、TAB4 wxmlページや導入手段のtab5の下部

< UM-タブバー活性指数= "0" > </ UM-タブバー>