WeChat開発で要素を全画面に表示させる方法の紹介

この記事では主に、WeChat アプレットで要素を画面の高さ全体に配置する実装方法に関する関連情報を紹介します。必要な友人は、

要素を画面の高さ全体に配置する実装方法を参照してください。 WeChat アプレット

at プロジェクトでは、画面の高さと幅を埋めるためにコンテナ要素がよく使用され、このコンテナ要素内に他の要素が配置されます。

幅は単純に width:100%

ですが、高さに関しては、親要素の高さを指定するときに height:100% を指定する必要があることがわかっています。

私の以前のアプローチは、jsを使用して画面の高さを取得し、それを高さに割り当てることでした。Webページの画面の高さは、WeChatアプレットでは

:window.innerHeight;

です。 、wx .getSystemInfo

interfaceを呼び出して、setDataを介して値を割り当てる必要がありますが、明らかにこれはjsを介して行われ、効率はCSSでスタイルを直接設定するよりも確実に効率的ではありません。

そこで、別の方法を使用します:

Web ページで body,html{height:100%} を設定します。

子要素で使用できるように、body と html を 100% に設定します。コンテナ要素が画面の高さ全体を占めるようになります。

しかし、WeChat アプレットには

dom オブジェクト

はありませんが、debugging ツールを見ると、dom ツリーにそれが表示されます (呼び出す方法がわかりません。呼び出しましょう)つまり、ルート ノードは page なので、 page{height:100%} を使用してみましょう確かに、それは実行可能です。高さはアプレット ウィンドウ全体を占めます。

それで、私は喜んで小さなプログラムを書き続けることができます。

【関連推奨事項】

1.

WeChatパブリックアカウントプラットフォームのソースコードのダウンロード

2.

Alizi注文システムのソースコードのダウンロード

以上がWeChat開発で要素を全画面に表示させる方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。