So deaktivieren Sie die Top-Navigation in Uniapp

In mobilen Anwendungen werden Navigationsleisten häufig verwendet, um Benutzern zu helfen, ihren aktuellen Standort und die verfügbaren Navigationsoptionen zu verstehen. In manchen Fällen entspricht das Weglassen der oberen Navigation jedoch möglicherweise besser den Anforderungen der Anwendung. In UNIAPP ist das Abbrechen der Top-Navigation sehr einfach. Als nächstes werden wir detailliert vorstellen, wie dies erreicht wird.

Warum die Top-Navigation abbrechen?

Manchmal benötigen die Seiten in der Anwendung keine obere Navigationsleiste, insbesondere angesichts unterschiedlicher Anwendungsszenarien und Benutzerverhaltensweisen. Es kann besser zur Benutzererfahrung passen, die obere Navigationsleiste abzubrechen. Wenn wir beispielsweise eine einfache Vollbild-Diashow erstellen möchten, benötigen wir keine obere Navigationsleiste, um den Benutzer abzulenken, sondern müssen uns mehr auf den Inhalt der Folie selbst konzentrieren.

Brechen Sie die Implementierung der Top-Navigation in UNIAPP ab.

1. Setzen Sie „navigationStyle“: „custom“ in manifest.json.

Öffnen Sie die Datei manifest.json im UNIAPP-Projekt und suchen Sie das Attribut „navigationStyle“ unter „globalStyle“. Option. Ändern Sie es wie unten gezeigt in „Benutzerdefiniert“:

"globalStyle": {
  "navigationStyle": "custom"
},

Nach der Einstellung „Benutzerdefiniert“ wird auf der Seite nicht mehr die Standardnavigationsleiste angezeigt.

2. Padding-top im Seitenstil festlegen

Da die Standardnavigationsleiste abgeschafft wurde, müssen wir padding-top zur Seite hinzufügen, um zu verhindern, dass der Inhalt blockiert wird. Der folgende Code kann zum Stil der Seite hinzugefügt werden:

page {
  padding-top: env(safe-area-inset-top);
}

Mit dieser Technik können wir verhindern, dass Elemente auf der Seite verdeckt werden, und gleichzeitig sicherstellen, dass die wichtigsten Informationen unserer Anwendung besser hervorgehoben werden.

3. Button-Ereignissprung

Nachdem wir die Navigationsleiste abgebrochen haben, müssen wir die Sprungfunktion auf der Seite implementieren, damit Benutzer die gesamte Anwendung durchsuchen können. Was wir jedoch zu diesem Zeitpunkt bedenken müssen, ist, dass das Abbrechen der Navigationsleiste nicht bedeutet, dass wir vollständig auf die Navigationsfunktion verzichten müssen. Definieren Sie daher eine Schaltfläche neu und fügen Sie Ereignis-Listener im JS-Code hinzu, um den Sprung zu implementieren.

In UNIAPP kann die Schaltfläche durch das von der Uni-Icons-Symbolbibliothek bereitgestellte Symbol ersetzt werden. Der Code lautet wie folgt:

<template>
  <view>
    <button @tap="redirectToIndex" class="icon-btn">
      <uni-icons type="home" size="30"></uni-icons>
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToIndex() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.icon-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Der obige Code definiert eine „icon-btn“-Schaltfläche und definiert die schwebende feste Positionierung Die untere rechte Ecke ist die Operationsposition, die restlichen Stile sind benutzerdefiniert. Bei Verwendung dieser Schaltfläche wird der Seitensprung hauptsächlich durch die Funktion uni.redirectTo() im JS-Ereignis erreicht. Diese Funktion schließt die aktuelle Seite und leitet den Benutzer zur Startseite der Anwendung weiter.

Zusammenfassung

Das Abbrechen der Top-Navigation von UNIAPP ist sehr einfach. Wir müssen nur das NavigationStyle-Attribut in der Datei manifest.json im Projekt festlegen und dann das Padding-Top-Attribut auf der Seite festlegen. Darüber hinaus können wir zur Implementierung der Sprungfunktion eine Schaltfläche und ein JS-Ereignis hinzufügen, um Seitenvorgänge in der Anwendung auszuführen. Mit diesem Ansatz können wir den Benutzern der Anwendung mehr Freiheiten und Möglichkeiten bieten, um ein besseres Benutzererlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie die Top-Navigation in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!