Rumah > hujung hadapan web > uni-app > teks badan

Bagaimana untuk menyembunyikan navigasi dalam uniapp

PHPz
Lepaskan: 2023-04-18 15:48:35
asal
2462 orang telah melayarinya

Uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan Vue.js Ia menyokong pembungkusan aplikasi ke dalam berbilang platform (seperti iOS, Android, H5, dll.). Apabila membangunkan aplikasi Uniapp, kami perlu kerap mengendalikan beberapa fungsi berkaitan navigasi, seperti menunjukkan dan menyembunyikan bar navigasi, bar bawah, dsb. Artikel ini akan memperkenalkan cara melaksanakan fungsi navigasi tersembunyi dalam Uniapp.

  1. Konfigurasikan bar navigasi dalam pages.json

Mari lihat dahulu cara mengkonfigurasi bar navigasi dalam Uniapp. Dalam Uniapp, kami boleh mengkonfigurasi halaman melalui fail pages.json. Sebagai contoh, konfigurasi berikut adalah dalam pages.json:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    }
  ]
}
Salin selepas log masuk

Dalam contoh ini, kami telah mengkonfigurasi dua halaman, satu ialah halaman indeks dan satu lagi ialah halaman senarai. Dalam setiap halaman, beberapa sifat asas bar navigasi ditetapkan, seperti tajuk, warna latar belakang, warna fon, dsb.

  1. Sembunyikan bar navigasi

Dalam sesetengah kes, kita perlu menyembunyikan bar navigasi, seperti pada halaman permulaan, halaman log masuk, dsb. Pada masa ini, kita perlu mengkonfigurasi setiap halaman secara individu untuk mencapai kesan menyembunyikan bar navigasi.

Untuk halaman yang perlu menyembunyikan bar navigasi, anda perlu menetapkan atribut berikut dalam pages.json:

{
  "path": "pages/login/login",
  "style": {
    "navigationBarTitleText": "登录",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarHidden": true
  }
}
Salin selepas log masuk

Dalam contoh ini, kami menambah atribut baharu dalam gaya: navigationBarHidden . Selepas menetapkannya kepada benar, bar navigasi akan disembunyikan.

Di atas ialah cara menyembunyikan bar navigasi dalam Uniapp. Menggunakan kaedah ini, kita boleh menyembunyikan dan menunjukkan bar navigasi dengan mudah.

Selain menyembunyikan bar navigasi, Uniapp juga menyokong fungsi seperti menyembunyikan bar bawah. Kaedah penggunaan pada asasnya adalah sama, cuma tambahkan parameter yang sepadan dalam konfigurasi halaman yang sepadan. Artikel ini hanya memperkenalkan bar navigasi tersembunyi Pembaca boleh belajar sendiri tentang fungsi berkaitan navigasi lain.

Ringkasan

Artikel ini memperkenalkan cara melaksanakan fungsi menyembunyikan bar navigasi dalam Uniapp dan menunjukkan kaedah menetapkan sifat berkaitan dalam fail pages.json. Menggunakan kaedah ini, kita boleh menyembunyikan dan memaparkan bar navigasi dengan mudah, yang sesuai untuk pelbagai senario. Dalam pembangunan sebenar, kita harus memutuskan sama ada kita perlu menyembunyikan fungsi seperti bar navigasi dan bar bawah berdasarkan keperluan sebenar. Saya harap pembaca boleh mendapat manfaat daripadanya apabila menggunakan Uniapp untuk pembangunan aplikasi merentas platform.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan navigasi 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