1. 起動ページを設定する
WeChat アプレットを開くと、pages の最初のページに入ります。そのため、pages.json のページの最初の項目にスタートアップ ページを記述するだけで済みます。
2. ナビゲーション バーを削除して全画面表示効果を実現します。
まずグローバル ナビゲーション バーのタイトルをクリアし、全画面表示する必要があるページに次のコードを追加します。
"スタイル": { "ナビゲーションスタイル": "カスタム" }
詳細については、uniapp 関連ドキュメント: pages.json ページ ルーティング | uni-app 公式 Web サイトを参照してください。
3. プレースホルダーナビゲーションバー
ナビゲーション バーを削除した後にページ コンテンツが上に移動する場合は、プレースホルダー要素を追加することで解決できます。
重要なのは、次の CSS スタイルをプレースホルダー要素に追加することです。
.status_bar { height: var(--status-bar-height); // 携帯電話のステータス バー (バッテリー表示の上部にある線) の高さを取得します width: 100%; }
4. 全画面の背景色を設定する
エラーのデモ: ルート要素に背景色を直接設定します。高さ: 100%、効果はありません。コンテンツによって引き伸ばされた部分のみが背景色を持ちます。
.content { 高さ: 100%;
背景色: #eaf1ff;
ディスプレイ: フレックス;
フレックス方向: 列;
整列項目: 中央;
}
正しい方法: 最小画面の高さを画面の高さの 100% に設定します。
コンテンツが画面全体に収まらず、高さも 100% になります
コンテンツが画面全体を超えており、高さはコンテンツの高さに応じて決定されます
.content { 最小高さ: 100vh;
背景色: #eaf1ff;
ディスプレイ: フレックス;
フレックス方向: 列;
整列項目: 中央;
}
