Uniapp schließt den horizontalen Bildschirm der App

Mit der Beliebtheit von Smartphones verlassen sich die Menschen für verschiedene Bedienungs- und Unterhaltungszwecke zunehmend auf Mobiltelefone. In manchen Fällen, beispielsweise beim Spielen eines Spiels oder beim Betrachten einer Fotogalerie, kann es jedoch vorkommen, dass ein Benutzer mobile Inhalte lieber im Querformat ansieht. In diesem Fall können viele Anwendungen je nach Benutzeranforderungen automatisch in den Querformatmodus wechseln. Einige Entwickler berücksichtigen diese Anforderungen jedoch möglicherweise nicht oder bieten Benutzern nicht die Möglichkeit, den horizontalen Bildschirm zu deaktivieren. In diesem Artikel stellen wir vor, wie Sie die Funktion zum Ausschalten des horizontalen Bildschirms in Uniapp implementieren.

In uniapp können Sie den horizontalen Bildschirm mit dem folgenden Code einschalten:

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

Ebenso können wir den horizontalen Bildschirm mit dem folgenden Code ausschalten:

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

Wie Sie sehen können, verwenden beide Funktionen uni.setScreenOrientation () Methode zum Festlegen der Bildschirmausrichtung. Mit dieser Methode können wir die Bildschirmausrichtung in Uniapp einfach ändern.

Wie implementieren Sie diese Funktion also in Ihrer eigenen Anwendung? Es ist eigentlich ganz einfach. Sie müssen den Benutzern lediglich die Möglichkeit bieten, den horizontalen Bildschirm auszuschalten. Hier sind einige Implementierungsmethoden:

1. Erstellen Sie eine Schaltfläche

Sie können der Seite eine Schaltfläche hinzufügen und diese an eine Funktion binden, die den horizontalen Bildschirm schließt. Beispiel:

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

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

Wenn der Benutzer auf diese Schaltfläche klickt, ruft Uniapp die Funktion closeOrientation() auf, um den horizontalen Bildschirm zu schließen.

2. Erstellen Sie einen Schalter

Zusätzlich zum Erstellen einer Schaltfläche können wir auch einen Schalter erstellen, der es dem Benutzer ermöglicht, die Bildschirmausrichtung jederzeit zu ändern. Hier ist ein Beispiel für einen Schalter, der mithilfe der Schalterkomponente implementiert wurde:

<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>

Wenn der Benutzer den Schalter umschaltet, ruft uniapp die Funktion onChange() auf und übergibt ihr den Wert des Schalters. In der Funktion können wir den Status des Schalters ermitteln und dann die Ausrichtung des Bildschirms festlegen.

3. Erstellen Sie einen Menüpunkt

Wenn die App über Menüfunktionen verfügt, können wir dem Menü auch eine Option hinzufügen, um die Bildschirmausrichtung zu deaktivieren. Das Folgende ist ein Beispiel für eine Menüoption, die mit der Komponente uni-popup-menu implementiert wurde:

<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>

Wenn der Benutzer auf die Menüoption klickt, ruft Uniapp die Funktion closeOrientation() auf, um die Bildschirmausrichtung zu deaktivieren.

Zusammenfassung

Mit der Methode uni.setScreenOrientation() können wir die Funktion zum Ausschalten des horizontalen Bildschirms in Uniapp einfach implementieren. Ob über Tasten, Schalter oder Menüoptionen, es kann Benutzern ein bequemes und benutzerfreundliches Anwendungserlebnis bieten. Achten Sie bei der Entwicklung von Uniapp-Anwendungen unbedingt auf die Benutzererfahrung und bieten Sie Benutzern mehr Auswahlmöglichkeiten und Freiheit.

Das obige ist der detaillierte Inhalt vonUniapp schließt den horizontalen Bildschirm der App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!