Rumah > hujung hadapan web > uni-app > Bagaimana untuk membatalkan navigasi bawah dalam uniapp

Bagaimana untuk membatalkan navigasi bawah dalam uniapp

PHPz
Lepaskan: 2023-04-27 10:31:51
asal
2464 orang telah melayarinya

Dengan populariti peranti mudah alih, aplikasi moden semakin memberi perhatian kepada reka bentuk UI/UX. Di bawah aliran ini, banyak aplikasi menambah fungsi penting mereka pada bar navigasi bawah untuk memudahkan pengguna mengakses. Walau bagaimanapun, dalam beberapa kes mungkin lebih sesuai untuk menghapuskan bar navigasi bawah. Artikel ini akan membincangkan cara membatalkan bar navigasi bawah dalam Uniapp.

Mula-mula, mari semak komponen bar navigasi bawah Uniapp. Komponen navigasi bawah ialah komponen boleh guna semula, biasanya terletak di bahagian bawah aplikasi, yang memaparkan ikon dan label untuk berbilang halaman atau ciri. Halaman atau ciri ini biasanya merupakan fungsi teras atau modul utama aplikasi.

  1. Membatalkan navigasi bahagian bawah halaman tunggal

Membatalkan navigasi bahagian bawah satu halaman adalah sangat mudah. Dalam halaman yang anda perlukan untuk menyembunyikan bar navigasi bawah, cuma tambahkan kod berikut dalam sembunyikannya apabila halaman dipaparkan Bar navigasi bawah, dan paparkan bar navigasi bawah sekali lagi apabila halaman disembunyikan.

Batalkan navigasi bawah pada berbilang halaman
  1. Jika anda perlu membatalkan navigasi bawah pada berbilang halaman, kami boleh menambah kod berikut pada fail App.vue:
export default {
    config: {
        "disableScroll": true,
        "navigationBarTitleText": "My Page",
        "usingComponents": {}
    },
    onShow() {
        uni.hideTabBar({
            animation: true
        });
    },
    onHide() {
        uni.showTabBar({
            animation: true
        });
    }
}
Salin selepas log masuk

Dalam kod, kami menggunakan cangkuk kitaran hayat onShow() dalam fail App.vue Setiap kali halaman dipaparkan, kami mendapat laluan halaman semasa dan menentukan sama ada bar navigasi bawah perlu disembunyikan. pada halaman semasa. Jika kami perlu menyembunyikannya, kami menggunakan kaedah hideTabBar yang disediakan oleh Uniapp untuk menyembunyikan bar navigasi bawah, jika tidak, kami memaparkan bar navigasi bawah.

Ringkasnya, membatalkan bar navigasi bawah Uniapp adalah sangat mudah. ​​Kami hanya perlu menambahkan kod yang sepadan pada halaman di mana navigasi bahagian bawah perlu disembunyikan atau dalam fail App.vue yang perlu. mengawal paparan navigasi bahagian bawah. Sudah tentu, jika anda memerlukan tahap penyesuaian dan kawalan yang lebih tinggi, komponen ini juga menyediakan lebih banyak sifat dan kaedah Sila rujuk dokumentasi Uniapp untuk butiran.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan