Bagaimana untuk merealisasikan gelongsor ke atas dan menyembunyikan kesan navigasi dalam uniapp

Dalam reka bentuk APP mudah alih, bar navigasi merupakan elemen yang sangat penting. Ia membolehkan pengguna mencari maklumat yang mereka perlukan dengan cepat, dan juga merupakan elemen visual yang penting bagi APP. Walau bagaimanapun, semasa proses reka bentuk, kita bukan sahaja perlu mempertimbangkan gaya dan susun atur bar navigasi, tetapi juga memberi perhatian kepada prestasi dan kesan interaksinya dalam senario yang berbeza.

Adalah mudah untuk mencapai kesan meluncur ke bawah dan menyembunyikan navigasi dalam uniapp. Kami hanya perlu menggunakan beberapa gaya mudah dan kod JS untuk mencapainya.

Mula-mula, tambahkan bekas pada kawasan navigasi halaman, tetapkan atribut kedudukannya kepada tetap, dan atribut indeks-znya kepada nilai yang lebih tinggi supaya ia sentiasa berada di bahagian atas halaman. Untuk menyembunyikan navigasi selepas meluncur ke bawah, kita boleh menggunakan atribut transform untuk mengalihkan bar navigasi keluar daripada julat skrin yang boleh dilihat.

Langkah pelaksanaan khusus adalah seperti berikut:

1. Tambahkan bekas navigasi bernama pengepala dan tambah gaya serta reka letak navigasi di dalamnya.
2. Tetapkan kedudukan awal bekas navigasi ke bahagian atas skrin.
3. Gunakan JS untuk mendengar acara tatal skrin Apabila pengguna meluncur ke bawah, bekas navigasi bergerak keluar dari julat skrin yang boleh dilihat. Sebaliknya, apabila pengguna meleret ke atas, bekas navigasi kembali ke bahagian atas skrin.

Pelaksanaan kod khusus adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan pembolehubah isHeaderShow untuk menandakan sama ada bar navigasi semasa perlu dipaparkan dan menggunakan pengiraan sifat untuk mengikat gaya Kontena navigasi, dan tambahkan pendengar acara tatal dalam kaedah JS untuk mengawal sama ada bar navigasi dipaparkan atau tidak.

Perlu diingatkan bahawa untuk bar navigasi beroperasi dengan betul, kita perlu menetapkan ketinggian bekas navigasi dan memastikan terdapat jarak yang mencukupi di bahagian kepala kawasan kandungan utama, jika tidak navigasi bar akan bertindih dengan kawasan kandungan.

Ringkasnya, dengan menetapkan kedudukan kepada tetap, menambah kesan peralihan dan mengubah atribut pada bekas navigasi, dan kemudian mengawal pergerakan bekas navigasi melalui mendengar acara tatal, kita boleh mencapai kesan gelongsor dengan mudah. ke bawah untuk menyembunyikan navigasi dalam uniapp.

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan gelongsor ke atas dan menyembunyikan kesan navigasi dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!