画面が水平のときにUniAppのシステムトップバーを非表示にする方法

一部の特定のモバイル アプリケーションでは、ユーザー エクスペリエンスを大幅に向上させることができるため、水平画面操作が非常に必要です。ただし、UniApp フレームワークを使用してアプリケーションを開発する場合、ユーザー エクスペリエンスを向上させるためにシステムのトップ バーを非表示にする必要がある場合があります。ここでは、UniApp で画面が横長の場合にシステムのトップ バーを非表示にする方法を紹介します。

1. まず、ページのmanifest.jsonファイルで設定する必要があります。このファイルに次のコードを追加します。

{
  "h5": {
    "custom": {
      "statusBarColor": "#000"
    }
  }
}

このコードの機能は、ステータス バーの色を黒に設定することです。これにより、ステータス バーが非表示になり、全画面モードで使用するときに画面が見やすくなります。

2. App.vue ファイルで、「onLaunch」という名前のメソッドを作成し、デバイスのシステム列を非表示にするために Weex API を呼び出します。 。

onLaunch: function() {
       if (uni.getSystemInfoSync().platform == 'android') {
         uni.getSystemInfo({
           success: function(res) {
             plus.navigator.setFullscreen(true);
           }
         });
       }
},

このメソッドは、デバイスが Android プラットフォームであるかどうかを検出し、デバイスを全画面モードに設定します。これらの操作を完了すると、上部のシステム バーが非表示になります。

3. 最後に、次のコードをページに追加します。

<style>
  .uni-page-head {
    display: none;
  }
</style>

このコード スニペットは、ページの uni-app ヘッダーを非表示にします。この操作により、横向きモードではページのヘッダーが完全に消え、ユーザーのエクスペリエンスを最大限に高めることができます。

概要

つまり、UniApp のランドスケープ モードでシステムのトップ バーを非表示にすると、ユーザー エクスペリエンスが向上し、ユーザーはアプリケーションにアクセスするときに、よりスムーズで完全なエクスペリエンスを体験できるようになります。この記事では、UniApp でこの機能を実装する方法を紹介します。

以上が画面が水平のときにUniAppのシステムトップバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。