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

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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • WeChatミニプログラム(パート3)タブバー下部ナビゲーションの詳細な紹介
  • タブ(ウィンドウ上部のタブバー)ページ切り替えを実現するWeChatアプレット開発
  • WeChatアプレット開発:タブバーの例の詳細な説明
  • WeChatアプレットは新しいログインページを作成し、タブバーを非表示にします
  • WeChat ミニプログラム公式ダイナミックカスタムボトムタブバーの例
  • uni-app での WeChat アプレットのカスタム タブバーの適応の詳細な説明
  • WeChatアプレット開発におけるタブバーアイコンと色の実装
  • WeChatアプレット開発タブ(ウィンドウ下部のタブバー)ページ切り替え
  • WeChatアプレットタブバーの使用例の詳細な説明
  • WeChatアプレットカスタムタブバーコンポーネントの開発の詳細な説明

<<:  MySQL 5.7 MGR シングルマスター決定マスターノード方式の詳細説明

>>:  VMware 仮想マシンでの Centos8 ブリッジの静的 IP 設定方法

推薦する

JavaScript で配列の変更を監視する方法

序文以前、defineProperty を紹介したとき、オブジェクトの変更のみを監視でき、配列の変更...

DIV 背景半透明テキスト非半透明スタイル

DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...

Helloダイアログボックスのデザイン体験の共有

「どうしたの?」特定の種類のダイアログ ボックスに慣れていない限り、ダイアログ ボックスが表示された...

IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)

css-vars-ポニーフィルCSS 変数を使用して Web ページのスキニングを実現すると、互換...

MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介

MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...

MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...

ツールキット: Bootstrap よりも強力なフロントエンド フレームワーク

注: 現在、最も人気のフロントエンド フレームワークは Bootstrap と Foundation...

webpackが静的リソースキャッシュを実装する方法

目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...

vue-admin-template 動的ルーティング実装例

ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...

MySQL マルチテーブルクエリの詳細な説明

よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...

MySQL 5.6 zipパッケージのインストールチュートリアルの詳細

これまでは、拡張子が .msi のファイル、つまり、完全なインストールが使用されていました。しかし、...

シンプルなビデオ連射機能を実装する JavaScript CSS3

この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...

ubuntu20.04 LTS システムのデフォルト ソース ソース リスト ファイルの変更

誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...

Linux 環境に mysql5.7.36 データベースをインストールするチュートリアル

ダウンロードアドレス: https://dev.mysql.com/downloads/mysql/...

モバイル開発チュートリアル: ピクセル表示の問題の概要

序文モバイル端末の開発の過程で、モバイル端末のディスプレイはデスクトップ端末のディスプレイとは一般的...