WeChatアプレットの下部にあるタブバーがコンテンツをブロックする問題に対処する簡単な方法

WeChatアプレットでタブバーを設定すると、重要なコンテンツがブロックされ、iPhoneXなどの異なるモデルでは、以下に示すように下部に空白スペースが表示される場合があります。難しいのは、ページ下部の空白スペースにもページが表示されるため、ブロックされた領域の高さを取得する必要があることです。

iPhoneX の下に余分な空白スペースができ、tabBar の遮蔽も増加していることがわかります。モデルに関するさまざまな情報は、wx.getSystemInfoSync() を通じて取得できます。

このうち、screenHeight は画面の高さで、safeArea の bottom プロパティは、tabBar の下の空白領域を削除した後の有効領域の垂直座標である安全領域を自動的に計算します。

この方法では、タブバーの高さを簡単に計算できます。

定数 res = wx.getSystemInfoSync()
const { screenHeight, safeArea: { bottom } } = res
console.log('resHeight',res);
if (画面の高さ && 下部){
  safeBottom = screenHeight - bottom とします。
  this.setData({
    高さ: 48 + safeBottom
  })
}

そのうち、48 はカスタム タブ バーの高さです。そのため、コンポーネントをカスタマイズして高さを設定して下部をサポートし、ページの末尾に tabBar を導入することができます。ただし、Webview を使用すると、Webview がページ全体を埋め尽くし、下部の空白を埋めることができなくなります。このとき、障害物の高さを URL クエリを通じて Webview ページに渡し、ページの padding-bottom を設定することができます。

付録: tabBar の主なプロパティ:

tabBar の各項目のプロパティは次のとおりです。

要約する

WeChatミニプログラムの下部にあるタブバーのコンテンツ妨害の対処方法についての記事はこれで終わりです。ミニプログラムの下部にあるタブバーのコンテンツ妨害の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。