Benutzerdefinierte Tabbar-Komponente für das WeChat-Applet

 "TabBar": {
 "benutzerdefiniert": wahr,
 "Farbe": "rot",
 "ausgewählteFarbe": "#3b81d7",
 "Hintergrundfarbe": "#000000",
 "Liste": [{
 "pagePath": "Seiten/Rolle/InsureIndex/index",
 "Text": "Startseite"
 }, {
 "pagePath": "Seiten/Rolle/MineIndex/index",
 "Text": "Startseite"
 }, {
 "pagePath": "Seiten/Index/Benutzerinfo/Benutzerinfo",
 "Text": "Mein"
 }]
 },

Komponente({
 Eigenschaften: {},
 
 Daten: {
 indexImg: "../static/images/tabBar/[email protected]",
 indexSelectImg: "../static/images/tabBar/[email protected]",
 aboutUsImg: "../static/images/tabBar/[email protected]",
 aboutUsSelectImg: "../static/images/tabBar/[email protected]",
 _tabbat: null,
 iPhoneX: falsch,
 URLs: ['/Seiten/Rolle/InsureIndex/index',
 „/Seiten/Index/Benutzerinfo/Benutzerinfo“
 ]
 },
 beigefügt() {
 var selbst = dies
//Dies ist Geschäftscode, Sie müssen sich wx.getStorage({ nicht ansehen.
 Schlüssel: 'Benutzerinfo',
 Erfolg: Funktion (res) {
 Konstante {
  Benutzerrollencode
 } = res.daten
 wenn (Benutzerrollencode == '50' || Benutzerrollencode == '70') {
  selbst. setData({
  ["urls[0]"]: '/Seiten/Rolle/MineIndex/index'
  })
 } sonst wenn (userRoleCode == '30' || userRoleCode == '35' || userRoleCode == '40') {
  selbst. setData({
  ["urls[0]"]: '/Seiten/Rolle/InsureIndex/index'
  })
 }
 }
 })
 wx.getSystemInfo({
 Erfolg(res) {
 Konsole.log(res.model)
 wenn (res.model.indexOf('iPhone X') >= 0) {
  selbst. setData({
  iPhoneX: stimmt
  })
 }
 }
 })
 },
 /**
 * Liste der Komponentenmethoden */
 Methoden: {
 switchTap: Funktion (e) {
 var selbst = dies
 var index = e.currentTarget.dataset.index;
 var urls = self.data.urls
 wx.switchTab({
 URL: URLs[Index],
 })
 }
 }
})

<div class="_tabbar {{iPhoneX?'_iPhoneX':''}}">
 <div class="titem {{_tabbat==0?'tCdk':''}}" data-index="0" bind:tap="switchTap">
 <image src="{{_tabbat==0?indexSelectImg:indexImg}}" />
 <b>Startseite</b>
 </div>
 <div class="titem {{_tabbat==1?'tCdk':''}}" data-index="1" bind:tap="switchTap">
 <image src="{{_tabbat==1?aboutUsSelectImg:aboutUsImg}}" />
 <b>Mein</b>
 </div>
</div>

._tabbar {
 Breite: 100 %;
 Höhe: 120rpx;
 Anzeige: Flex;
 Elemente ausrichten: zentrieren;
 Hintergrund: #fff;
 Schriftgröße: 26rpx;
 Farbe: #999999;
 Kastenschatten: 0px -7rpx 13rpx 0px rgba (193, 185, 204, 0,13);
}
 
._tabbar .titem {
 Textausrichtung: zentriert;
 Breite: 50%;
}
 
._tabbar .titem Bild {
 Anzeige: Block;
 Rand: automatisch;
 Breite: 48rpx;
 Höhe: 48rpx;
 Rand unten: 10rpx;
}
 
._tabbar .tCdk {
 Farbe: #37ADFE;
}
 
._iPhoneX {
 Höhe: 148rpx;
}

{
 "Komponente": wahr,
 "usingComponents": {}
}

onShow: Funktion () {
 dies.getTabBar().setData({
 _tabbat: 0
 })
 },