uniapp détermine si l'écran est horizontal ou vertical

Sur les appareils mobiles, différentes orientations d'écran peuvent correspondre à différents effets d'affichage. Par conséquent, les développeurs doivent effectuer un jugement et un traitement pertinents sur l'orientation de l'écran dans l'application. Dans le framework uniapp, nous pouvons utiliser l'API fournie par uniapp pour déterminer si l'écran est horizontal ou vertical.

1. Utilisez l'API fournie par uniapp pour déterminer l'orientation de l'écran

uniapp fournit une API uni.getSystemInfo, qui peut être utilisée pour obtenir les informations système de l'appareil, y compris l'orientation actuelle de l'écran de l'appareil. La mise en œuvre spécifique est la suivante :

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

En obtenant les informations système de l'appareil, nous pouvons obtenir la largeur et la hauteur de l'écran de l'appareil, et comparer les deux valeurs pour déterminer l'orientation de l'écran de l'appareil actuel.

2. Effectuer le traitement associé en fonction de l'orientation de l'écran

Après avoir obtenu l'orientation de l'écran de l'appareil, nous pouvons effectuer le traitement associé via les méthodes correspondantes. Voici quelques méthodes de traitement courantes :

1. Lorsque l'appareil est en mode paysage, nous pouvons désactiver le défilement vertical de la page et ajouter des éléments horizontaux à la page pour rendre l'affichage de la page plus raisonnable.

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

2. Lorsque l'appareil est en mode portrait, nous pouvons restaurer le défilement vertical de la page et ajuster la disposition des éléments de la page à la verticale.

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

3. Dans le développement d'Uniapp, nous pouvons également utiliser l'attribut calculé Watcher de vue pour mettre en page la page de manière réactive, obtenant ainsi une mise en page adaptative dans différentes directions d'écran.

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);
  }
}

Grâce au code ci-dessus, nous pouvons gérer la page dans une mise en page réactive et modifier dynamiquement la disposition des pages en fonction des changements d'orientation de l'écran, obtenant ainsi des opérations de mise en page plus flexibles.

3. Résumé

En général, dans le développement d'uniapp, nous pouvons utiliser l'API système fournie par uniapp pour obtenir la direction de l'écran de l'appareil, puis traiter la page en fonction de la situation spécifique. Lors de la mise en œuvre d'une mise en page adaptative dans différentes directions d'écran, nous pouvons utiliser l'attribut calculé Watcher de vue pour mettre en page la page de manière réactive, améliorant ainsi considérablement l'efficacité du développement et la qualité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!