So realisieren Sie das Hochschieben und Ausblenden des Navigationseffekts in Uniapp

Beim Design mobiler Apps ist die Navigationsleiste ein sehr wichtiges Element. Es ermöglicht Benutzern das schnelle Auffinden der benötigten Informationen und ist außerdem ein wichtiges visuelles Element einer APP. Während des Designprozesses müssen wir jedoch nicht nur den Stil und das Layout der Navigationsleiste berücksichtigen, sondern auch auf deren Leistung und Interaktionseffekte in verschiedenen Szenarien achten.

Es ist relativ einfach, den Effekt des Herunterschiebens und Ausblendens der Navigation in Uniapp zu erzielen. Dazu müssen wir nur einige einfache Stile und JS-Code verwenden.

Fügen Sie zunächst einen Container zum Navigationsbereich der Seite hinzu, setzen Sie dessen Positionsattribut auf „Fixed“ und sein Z-Index-Attribut auf einen höheren Wert, damit er sich immer oben auf der Seite befindet. Um die Navigation nach dem Herunterrutschen auszublenden, können wir das Transformationsattribut verwenden, um die Navigationsleiste aus dem sichtbaren Bereich des Bildschirms zu verschieben.

Die spezifischen Implementierungsschritte lauten wie folgt:

1. Fügen Sie einen Navigationscontainer mit dem Namen „Header“ hinzu und fügen Sie darin den Stil und das Layout der Navigation hinzu.
2. Stellen Sie die Anfangsposition des Navigationscontainers auf den oberen Bildschirmrand.
3. Verwenden Sie JS, um Bildschirm-Scroll-Ereignisse abzuhören. Wenn der Benutzer nach unten rutscht, bewegt sich der Navigationscontainer aus dem sichtbaren Bereich des Bildschirms. Umgekehrt kehrt der Navigationscontainer an den oberen Bildschirmrand zurück, wenn der Benutzer nach oben wischt.

Die spezifische Code-Implementierung lautet wie folgt:

// html文件代码
<template>
  <div class="wrapper">
    <header>
      <!--导航内容-->
    </header>
    <!--主要内容区域-->
  </div>
</template>

<style>
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 999;
    transition: all .3s ease-in-out; // 添加过渡效果
  }
  
  header.hide {
    transform: translateY(-100%);
  }
</style>

<script>
  export default {
    data() {
      return {
        lastScrollTop: 0,
        isHeaderShow: true
      }
    },
    mounted() {
      window.addEventListener('scroll', this.onScroll)
    },
    destroyed() {
      window.removeEventListener('scroll', this.onScroll)
    },
    methods: {
      onScroll(e) {
        const currentScrollTop = document.documentElement.scrollTop
        if (currentScrollTop > 0 && currentScrollTop > this.lastScrollTop) {
          this.isHeaderShow = false
        } else {
          this.isHeaderShow = true
        }
        this.lastScrollTop = currentScrollTop
      }
    },
    computed: {
      headerClass() {
        return {
          hide: !this.isHeaderShow
        }
      }
    }
  }
</script>

Im obigen Code verwenden wir die Variable isHeaderShow, um zu markieren, ob die aktuelle Navigationsleiste angezeigt werden soll, verwenden berechnete Eigenschaften, um den Stil des Navigationscontainers zu binden, und fügen einen Bildlauf hinzu Ereignisse in der JS-Methode Überwachen und steuern Sie Änderungen daran, ob die Navigationsleiste angezeigt wird oder nicht.

Damit die Navigationsleiste ordnungsgemäß funktioniert, müssen wir die Höhe des Navigationscontainers festlegen und sicherstellen, dass zwischen dem Kopf des Hauptinhaltsbereichs und ansonsten zwischen der Navigationsleiste und dem Inhalt genügend Platz vorhanden ist Bereich wird sich überlappen.

Kurz gesagt: Indem wir die Position auf „Fest“ setzen, Übergangseffekte und Transformationsattribute zum Navigationscontainer hinzufügen und dann die Bewegung des Navigationscontainers durch Abhören von Bildlaufereignissen steuern, können wir ganz einfach den Effekt erzielen, nach unten zu rutschen, um den zu verbergen Navigation in Uniapp.

Das obige ist der detaillierte Inhalt vonSo realisieren Sie das Hochschieben und Ausblenden des Navigationseffekts in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!