WeChatウィジェットtabBarカスタム開発

1.tabBarの構成
微信公式ドキュメントのカスタムtabBarリンクを表示できます

app.jsonのtabBarアイテムはcustomフィールドを指定し、残りのtabBar関連構成も完全に補完します.

すべてのtabページのjsonにusingComponents項目を宣言する必要があります.appでもいいです.jsonグローバルオープン

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "  "
    }, {
      "pagePath": "page/API/index",
      "text": "  "
    }]
  },
  "usingComponents": {}
}

2.tabBarコードファイルの追加
コード・ルートの下にエントリ・ファイルを追加するには、次の手順に従います.

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3.tabBarコードの作成
tabBarのレンダリングを完全に管理するカスタムコンポーネントで作成できます.また、カスタムコンポーネントにはgetTabBarインタフェースが追加され、現在のページのカスタムtabBarコンポーネントのインスタンスを取得できます.
Custom-tab-barコード

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "  "
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "  "
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
      console.log(this.selected)
    }
  }
})

  
  
    
    {{item.text}}
  

cssスタイルは参照用のみ

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

完了後に問題が発見され、ルートの切り替えをクリックするとtabがタイムリーに切り替えられず、ページの点滅も発生します.
解決策は次のとおりです.
ルートを切り替える各ページのonShowライフサイクル関数でcustom-tab-barのselected値(tabのindexを切り替える)を変更します.

onShow: function () {
    this.getTabBar().setData({
      selected: 0
    });
  }

問題は解決した!