WeChat アプレットのカスタム タブバー コンポーネント

 "タブバー": {
 「カスタム」：true、
 "色": "赤",
 "選択された色": "#3b81d7",
 "背景色": "#000000",
 「リスト」: [{
 "pagePath": "pages/Role/InsureIndex/index",
 "テキスト": "ホーム"
 }, {
 "pagePath": "pages/Role/MineIndex/index",
 "テキスト": "ホーム"
 }, {
 "pagePath": "pages/index/userInfo/userInfo",
 "テキスト": "私の"
 }]
 },

成分（{
 プロパティ: {},
 
 データ： {
 インデックス画像: "../static/images/tabBar/[email protected]",
 インデックス選択画像: "../static/images/tabBar/[email protected]",
 aboutUsImg: "../static/images/tabBar/[email protected]",
 aboutUsSelectImg: "../static/images/tabBar/[email protected]",
 _tabbat: ヌル、
 iPhoneX: 誤り、
 URL: ['/pages/Role/InsureIndex/index',
 '/pages/index/userInfo/userInfo'
 ]
 },
 添付（） {
 var 自己 = これ
//これはビジネスコードなので、wx.getStorage({ を見る必要はありません。
 キー: 'userInfo',
 成功: 関数 (res) {
 定数{
  ユーザーロールコード
 } = res.データ
 (ユーザーロールコード == '50' || ユーザーロールコード == '70') {
  自己.setData({
  ["urls[0]"]: '/pages/Role/MineIndex/index'
  })
 } そうでない場合 (userRoleCode == '30' || userRoleCode == '35' || userRoleCode == '40') {
  自己.setData({
  ["urls[0]"]: '/pages/Role/InsureIndex/index'
  })
 }
 }
 })
 wx.getSystemInfo({
 成功(res) {
 コンソールログ(res.model)
 res.model.indexOf('iPhone X') >= 0 の場合 {
  自己.setData({
  iPhoneX: 本当
  })
 }
 }
 })
 },
 /**
 * コンポーネントメソッドのリスト */
 メソッド: {
 スイッチタップ: 関数(e) {
 var 自己 = これ
 var インデックス = e.currentTarget.dataset.index;
 var urls = self.data.urls
 wx.switchTab({
 url: urls[インデックス],
 })
 }
 }
})

<div class="_tabbar {{iPhoneX?'_iPhoneX':''}}">
 <div class="titem {{_tabbat==0?'tCdk':''}}" data-index="0" bind:tap="switchTap">
 <画像 src="{{_tabbat==0?indexSelectImg:indexImg}}" />
 <b>ホーム</b>
 </div>
 <div class="titem {{_tabbat==1?'tCdk':''}}" data-index="1" bind:tap="switchTap">
 <画像 src="{{_tabbat==1?aboutUsSelectImg:aboutUsImg}}" />
 <b>私の</b>
 </div>
</div>

._タブバー{
 幅: 100%;
 高さ: 120rpx;
 ディスプレイ: フレックス;
 アイテムの位置を中央揃えにします。
 背景: #fff;
 フォントサイズ: 26rpx;
 色: #999999;
 ボックスの影: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13);
}
 
._タブバー .titem {
 テキスト配置: 中央;
 幅: 50%;
}
 
._tabbar .titem イメージ {
 表示: ブロック;
 マージン: 自動;
 幅: 48rpx;
 高さ: 48rpx;
 下部マージン: 10rpx;
}
 
._タブバー .tCdk {
 色: #37ADFE;
}
 
._iPhoneX {
 高さ: 148rpx;
}

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

onShow: 関数() {
 this.getTabBar().setData({
 _tabbat: 0
 })
 },