uniapp は画面が水平か垂直かを決定します

モバイルデバイスでは、画面の向きが異なると表示効果が異なる場合があるため、開発者はアプリケーションで画面の向きを適切に判断し、処理する必要があります。 uniapp フレームワークでは、uniapp が提供する API を使用して、画面が水平か垂直かを判断できます。

1. uniapp が提供する API を使用して画面の向きを決定します

uniapp は、現在の向きを含むデバイスのシステム情報を取得するために使用できる uni.getSystemInfo API を提供します。デバイスの画面。具体的な実装は次のとおりです。

// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
// 设备屏幕宽度
const screenWidth = systemInfo.screenWidth;
// 设备屏幕高度
const screenHeight = systemInfo.screenHeight;
// 设备屏幕方向
const orientation = screenWidth > screenHeight ? 'landscape' : 'portrait';

デバイスのシステム情報を取得することで、デバイスの画面の幅と高さを取得し、2 つの値を比較して現在の画面の向きを決定できます。デバイス。

2. 画面の向きに応じて関連処理を実行する

デバイスの画面の向きを取得した後、対応するメソッドで関連処理を実行できます。以下に一般的な処理方法をいくつか示します。

1. デバイスが横向きモードの場合、ページの垂直スクロールを無効にし、ページをより適切に表示するためにいくつかの水平要素をページに追加できます。

if (orientation === 'landscape') {
  // 禁用竖屏滚动
  document.body.style.overflow = 'hidden';
  // 页面横向排列
  document.body.style.flexDirection = 'row';
}

2. デバイスが縦向きモードの場合、ページの垂直スクロールを復元し、ページ要素の配置を垂直に戻すように調整できます。

if (orientation === 'portrait') {
  // 恢复竖屏滚动
  document.body.style.overflow = '';
  // 页面竖向排列
  document.body.style.flexDirection = 'column';
}

3. ユニアプリ開発では、vue の計算属性 Watcher を使用してページを応答的にレイアウトすることもでき、それによってさまざまな画面方向での適応型レイアウトを実現できます。

export default {
  data() {
    return {
      screenWidth: '',
      screenHeight: '',
    }
  },
  computed: {
    isLandscape() {
      return this.screenWidth > this.screenHeight;
    },
    containerStyle() {
      return {
        flexDirection: this.isLandscape ? 'row' : 'column',
        // 其他布局样式
      }
    }
  },
  methods: {
    handleResize() {
      const systemInfo = uni.getSystemInfoSync();
      this.screenWidth = systemInfo.screenWidth;
      this.screenHeight = systemInfo.screenHeight;
    },
  },
  mounted() {
    // 监听窗口改变
    window.addEventListener('resize', this.handleResize, false);
    this.handleResize();
  },
  unmounted() {
    window.removeEventListener('resize', this.handleResize, false);
  }
}

上記のコードにより、ページをレスポンシブレイアウトで管理し、画面の向きの変化に応じてページの配置を動的に変更することで、より柔軟なレイアウト操作を実現できます。

3. まとめ

一般に、uniapp 開発では、uniapp が提供するシステム API を使用してデバイスの画面方向を取得し、特定の状況に応じてページを処理します。さまざまな画面方向にアダプティブ レイアウトを実装する場合、vue の計算属性 Watcher を使用してページを応答的にレイアウトできるため、開発効率とコードの品質が大幅に向上します。

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