Bagaimana untuk membatalkan navigasi teratas dalam uniapp

Dalam aplikasi mudah alih, bar navigasi sering digunakan untuk membantu pengguna memahami lokasi semasa mereka dan pilihan navigasi yang tersedia. Walau bagaimanapun, dalam beberapa kes, menghapuskan navigasi atas mungkin lebih sesuai dengan keperluan aplikasi. Dalam UNIAPP, membatalkan navigasi teratas adalah sangat mudah. ​​Seterusnya, kami akan memperkenalkan cara mencapainya secara terperinci.

Mengapa membatalkan navigasi teratas?

Kadangkala, halaman dalam aplikasi tidak memerlukan bar navigasi teratas, terutamanya dengan mengambil kira senario aplikasi dan gelagat pengguna yang berbeza Ia mungkin lebih selaras dengan pengalaman pengguna untuk membatalkan bar navigasi teratas. Sebagai contoh, apabila kami ingin mencipta tayangan slaid skrin penuh yang ringkas, kami tidak memerlukan bar navigasi atas untuk mengalih perhatian pengguna, tetapi perlu lebih memfokuskan pada kandungan slaid itu sendiri.

Batalkan pelaksanaan navigasi teratas dalam UNIAPP

1. Tetapkan "navigationStyle": "custom" dalam manifest.json

Buka manifes projek UNIAPP. json, cari atribut "navigationStyle" di bawah pilihan "globalStyle". Tukar kepada "tersuai" seperti yang ditunjukkan di bawah:

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

Selepas menetapkan "tersuai", halaman tidak akan memaparkan bar navigasi lalai lagi.

2. Tetapkan padding-top dalam gaya halaman

Oleh kerana bar navigasi lalai dibatalkan, kami perlu menambah padding-top pada halaman untuk mengelakkan kandungan daripada menjadi disekat. Anda boleh menambah kod berikut pada gaya halaman:

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

Dengan menggunakan teknik ini, kami boleh menghalang elemen pada halaman daripada dilindungi, sambil memastikan maklumat utama aplikasi kami diserlahkan dengan lebih baik.

3. Lompat acara butang

Selepas membatalkan bar navigasi, kami perlu melaksanakan fungsi lompat dalam halaman supaya pengguna boleh menyemak imbas keseluruhan aplikasi. Tetapi apa yang perlu kita fikirkan pada masa ini ialah membatalkan bar navigasi tidak bermakna kita perlu meninggalkan sepenuhnya fungsi navigasi. Oleh itu, takrifkan semula butang dan tambahkan pendengar acara dalam kod JS untuk melaksanakan lompatan.

Dalam UNIAPP, butang boleh digantikan dengan ikon yang disediakan oleh perpustakaan ikon uni-ikon Kodnya adalah seperti berikut:

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

Kod di atas mentakrifkan butang "icon-btn". dan mentakrifkan kedudukan tetap terapung, sudut kanan bawah ialah kedudukan pengendalian, dan gaya yang selebihnya disesuaikan. Apabila menggunakan butang ini, lompatan halaman dicapai terutamanya melalui fungsi uni.redirectTo() dalam acara JS. Fungsi ini menutup halaman semasa dan mengubah hala pengguna ke halaman utama aplikasi.

Ringkasan

Membatalkan navigasi teratas UNIAPP adalah sangat mudah Kami hanya perlu menetapkan atribut navigationStyle dalam fail manifest.json dalam projek, dan kemudian tetapkan atribut padding-top dalam. halaman tersebut. Selain itu, untuk melaksanakan fungsi lompat, kami boleh menambah butang dan menambah acara JS padanya untuk melaksanakan operasi halaman dalam aplikasi. Dengan pendekatan ini, kami boleh memberikan lebih banyak kebebasan dan peluang untuk menyampaikan pengalaman pengguna yang lebih baik kepada pengguna aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk membatalkan navigasi teratas dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!