uniappはアプリの水平画面を閉じます-uni-app-php.cn

uniappはアプリの水平画面を閉じます

WBOY

リリース： 2023-05-26 16:27:07

オリジナル

2305 人が閲覧しました

スマートフォンの普及により、人々はさまざまな操作やエンターテイメントのために携帯電話に依存することが増えています。ただし、ゲームをプレイしているときやフォトギャラリーを表示しているときなど、場合によっては、ユーザーはモバイルコンテンツを横向きで表示することを好む場合があります。この場合、多くのアプリケーションは、ユーザーのニーズに基づいて自動的に横向きモードに切り替えることができます。ただし、開発者の中には、これらのニーズを考慮していないか、水平画面をオフにするオプションをユーザーに提供していなかった可能性があります。この記事ではuniappの横画面機能をオフにする方法を紹介します。

uniapp では、次のコードを使用して水平画面をオンにすることができます:

uni.setScreenOrientation({
    orientation: 'landscape',
    success: function () {
        console.log('设置屏幕方向为横屏');
    }
})

ログイン後にコピー

同様に、次のコードを使用して水平画面をオフにすることができます:

uni.setScreenOrientation({
    orientation: 'portrait',
    success: function () {
        console.log('设置屏幕方向为竖屏');
    }
})

ログイン後にコピー

ご覧のとおり、どちらの関数も uni.setScreenOrientation() メソッドを使用して画面の向きを設定します。この方法を使うと、uniappで画面の向きを簡単に切り替えることができます。

それでは、この関数を独自のアプリケーションに実装するにはどうすればよいでしょうか?実際には非常に簡単で、横画面をオフにするオプションをユーザーに提供するだけです。以下にいくつかの実装方法を示します。

ボタンの作成

ページにボタンを追加し、水平画面を閉じる関数にバインドできます。例:

<template>
  <view>
    <button @click="closeOrientation">关闭横屏</button>
  </view>
</template>

<script>
  export default {
    methods: {
      closeOrientation() {
        uni.setScreenOrientation({
          orientation: 'portrait',
          success: function () {
            console.log('设置屏幕方向为竖屏');
          }
        })
      }
    }
  }
</script>

ログイン後にコピー

ユーザーがこのボタンをクリックすると、uniapp は closeOrientation() 関数を呼び出して水平画面を閉じます。

スイッチの作成

ボタンの作成に加えて、ユーザーがいつでも画面の向きを切り替えられるようにするスイッチも作成できます。以下は、switch コンポーネントを使用して実装されたスイッチの例です。

<template>
  <view>
    <switch v-model="isOrientationOn" @change="onChange"></switch>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isOrientationOn: true,
      }
    },
    methods: {
      onChange(value) {
        if (value === false) {
          uni.setScreenOrientation({
            orientation: 'portrait',
            success: function () {
              console.log('设置屏幕方向为竖屏');
            }
          })
        } else {
          uni.setScreenOrientation({
            orientation: 'landscape',
            success: function () {
              console.log('设置屏幕方向为横屏');
            }
          })
        }
      }
    }
  }
</script>

ログイン後にコピー

ユーザーがスイッチを切り替えると、uniapp は onChange() 関数を呼び出し、スイッチの値を渡します。この関数では、スイッチの状態を判断し、画面の向きを設定できます。

メニュー項目を作成する

アプリケーションにメニュー機能がある場合は、画面の向きをオフにするオプションをメニューに追加することもできます。以下は、uni-popup-menu コンポーネントを使用して実装されたメニューオプションの例です。

<template>
  <view>
    <uni-popup-menu>
      <uni-popup-menu-item @click="closeOrientation">关闭横屏</uni-popup-menu-item>
    </uni-popup-menu>
  </view>
</template>

<script>
  export default {
    methods: {
      closeOrientation() {
        uni.setScreenOrientation({
          orientation: 'portrait',
          success: function () {
            console.log('设置屏幕方向为竖屏');
          }
        })
      }
    }
  }
</script>

ログイン後にコピー

ユーザーがメニューオプションをクリックすると、uniapp は closeOrientation() 関数を呼び出して画面の向きをオフにします。

概要

uni.setScreenOrientation()メソッドを使用すると、uniappで横画面をオフにする機能を簡単に実装できます。ボタン、スイッチ、またはメニューオプションを通じて、ユーザーに便利でフレンドリーなアプリケーションエクスペリエンスを提供できます。 uniapp アプリケーションを開発するときは、ユーザーエクスペリエンスに必ず注意を払い、ユーザーにより多くの選択肢と自由を提供してください。

以上がuniappはアプリの水平画面を閉じますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。