ミニプログラムカスタムタブバーコンポーネントのカプセル化

この記事の例では、ミニプログラムのカスタムタブバーコンポーネントをカプセル化するための具体的なコードを参考のために共有しています。具体的な内容は次のとおりです。

1. 新しいコンポーネントを作成する: コンポーネントの下にタブバーを作成する

2. コンポーネントの index.wxml 構造は次のとおりです。

<カバービュークラス="タブバー">
 <カバービュークラス="タブバーボーダー"></カバービュー>
 <カバービュー wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="tabChange">
  <カバーイメージ src="{{tabbarIndex === インデックス ? item.selectedIconPath : item.iconPath}}"></カバーイメージ>
  <カバービュー スタイル="color: {{tabbarIndex === index ? selectedColor : color}}">{{item.text}}</カバービュー>
 </カバービュー>
</カバービュー>

3. コンポーネントの index.wxss 構造は次のとおりです。

.タブバー{
  位置: 固定;
  下部: 0;
  左: 0;
  右: 0;
  高さ: 60px;
  背景: 白;
  ディスプレイ: フレックス;
  パディング下部: env(セーフエリアインセット下部);
}

.タブバーの境界線 {
  背景色: rgba(0, 0, 0, 0.33);
  位置: 絶対;
  左: 0;
  上: 0;
  幅: 100%;
  高さ: 1px;
  変換: スケールY(0.5);
}

.タブバー項目 {
  フレックス: 1;
  テキスト配置: 中央;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  flex-direction: 列;
}

.タブバーアイテムカバー画像{
  幅: 28px;
  高さ: 28px;
  下マージン: 2px;
}

.tab-bar-item カバービュー {
  フォントサイズ: 10px;
}

4. コンポーネントの index.js 構造は次のとおりです。

// ページ/コンポーネント/タブバー/index.js
成分（{
  /**
 1. コンポーネントプロパティのリスト*/
  オプション:
    multipleSlots: true // コンポーネントを定義するときにオプションで複数のスロットのサポートを有効にする},
  プロパティ:
    リスト: {
      タイプ: 配列、
      価値： []
    },
    選択された色:{
      タイプ: 文字列、
      価値：''
    },
    色：{
      タイプ: 文字列、
      価値：''
    },
  },

  /**
 2. コンポーネントの初期データ*/
  データ： {
    tabbarIndex: 0 //デフォルトでは最初のタブ要素が表示されます},

  生涯:
    添付（） {}
  },

  /**
 3. コンポーネントメソッドリスト*/
  メソッド: {
    //コンポーネントクリックイベントtabChange(e) {
      // 下部バー要素のインデックスを取得します。let index = e.currentTarget.dataset.index;
      this.setData({
        タブバーインデックス:インデックス、
      })
      //triggerEvent はコンポーネントのイベントを取得します //onMyEvent ページから渡されたクリックイベント名 this.triggerEvent('onMyEvent',{
        タブバーインデックス:インデックス、
      })
    },
  }
})

5. コンポーネントの index.json 構造は次のとおりです。

{
  「コンポーネント」：true、
  "コンポーネントの使用": {}
}

6. ページ内のコンポーネントの使用
7. ページの JSON コードは次のとおりです。

{
  "navigationBarTitleText": "テスト",
  "コンポーネントの使用": {
    "mp-tabbar": "../components/tabBar/index"
  }
}

8. ページの wxml コードは次のとおりです。

//タブ1が選択されたときにページに表示されるコンテンツ <view wx:if="{{tabbarIndex == 0}}">111111</view>
//タブ2が選択されたときにページに表示されるコンテンツ <view wx:if="{{tabbarIndex == 1}}">222222</view>
//タブ3が選択されたときにページに表示されるコンテンツ <view wx:if="{{tabbarIndex == 2}}">333333</view>
<mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="tabChange"></mp-tabbar>

9. ページの js コードは次のとおりです。

ページ（{
  データ： {
    tabbarIndex:0, // デフォルトの最初のタブ要素の色: "#555555",
    選択された色: "#2ea7e0",
    //ボトムバーリスト: [{
        "テキスト": "市場",
        "アイコンパス": "/images/bazaar.png",
        "選択されたアイコンパス": "/images/bazaar_selected.png",
      },
      {
        "text": "再充電",
        "アイコンパス": "/images/recharge.png",
        "selectedIconPath": "/images/recharge_selected.png",
      }, {
        "text": "艦隊",
        "アイコンパス": "/images/market.png",
        "選択されたアイコンパス": "/images/market_selected.png",
      }
    ]
  },
  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
    this.tabComponent = this.selectComponent('#tabComponent');
    selectedColor を this.data.selectedColor とします。
    color = this.data.color とします。
    this.tabComponent.setData({
      選択された色: 選択された色、
      色:色
   })
   コンソールログ(this.tabComponent.data.tabbarIndex)
  },
  //コンポーネントから渡されたデータを取得する tabChange:function(e){
    index = e.detail.tabbarIndex とします。
    this.setData({
      タブバーインデックス:インデックス
    })
    コンソールログ(e.detail.tabbarIndex)
  }
})

最終的な効果は図に示されています。