Eine einfache Methode, um mit der TabBar am unteren Rand des WeChat-Applets umzugehen, das Inhalte blockiert

Nach der Konfiguration der TabBar im WeChat-Applet werden wichtige Inhalte blockiert, und bei verschiedenen Modellen wie dem iPhoneX bleibt möglicherweise unten ein leerer Bereich, wie unten gezeigt. Das Schwierige ist, dass im leeren Bereich unten auf der Seite auch die Seite angezeigt wird. Daher muss die Höhe des blockierten Bereichs ermittelt werden.

Es ist ersichtlich, dass unter dem iPhoneX ein zusätzlicher Leerraum vorhanden ist, der auch die Okklusion der TabBar erhöht. Verschiedene Informationen zum Modell können über wx.getSystemInfoSync () abgerufen werden.

Unter diesen ist screenHeight die Bildschirmhöhe, und die untere Eigenschaft von safeArea berechnet automatisch den sicheren Bereich. Dies ist die vertikale Koordinate des nutzbaren Bereichs nach dem Entfernen des leeren Bereichs unter der Registerkartenleiste.

So lässt sich die Höhe der TabBar ganz einfach berechnen:

const res = wx.getSystemInfoSync()
const { Bildschirmhöhe, sichere Fläche: { unten } } = res
console.log('resHeight',res);
wenn (Bildschirmhöhe und unten) {
  let safeBottom = Bildschirmhöhe - unten
  dies.setData({
    Höhe: 48 + SafeBottom
  })
}

Unter ihnen ist 48 die Höhe unserer benutzerdefinierten Tab-Leiste, sodass wir eine Komponente anpassen können, um die Höhe so einzustellen, dass sie den unteren Rand unterstützt, und dann die Tab-Leiste am Ende der Seite einführen können. Bei Verwendung von Webview füllt Webview jedoch die gesamte Seite aus, was dazu führt, dass die Lücke darunter nicht ausgefüllt werden kann. Zu diesem Zeitpunkt kann die Höhe des Hindernisses über die URL-Abfrage an die Webview-Seite übergeben und dann der Padding-Bottom für die Seite festgelegt werden.

Anhang: Haupteigenschaften von tabBar:

Die Eigenschaften jedes Elements in der Tab-Leiste lauten wie folgt:

Zusammenfassen

Dies ist das Ende dieses Artikels zum Umgang mit der Inhaltsbehinderung der TabBar am unteren Rand des WeChat-Miniprogramms. Weitere Informationen zur Inhaltsbehinderung der TabBar am unteren Rand des Miniprogramms finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!