Bagaimana untuk mengawal paparan dan menyembunyikan bar tab dalam uniapp

Dengan penggunaan aplikasi mudah alih yang meluas, TabBar, sebagai reka bentuk bar navigasi bawah arus perdana, diguna pakai oleh semakin banyak aplikasi. Dalam pembangunan UniApp bagi rangka kerja Vue, cara untuk mengawal paparan dan penyembunyian TabBar juga berbeza daripada aplikasi asli tradisional Artikel ini akan memperkenalkan cara menggunakan UniApp untuk mengawal paparan dan penyembunyian TabBar.

1. Pengetahuan prasyarat

Sebelum melaksanakan operasi mengawal paparan dan penyembunyian TabBar seperti yang diterangkan dalam artikel ini, anda perlu menguasai pengetahuan prasyarat berikut:

• Vue 2 (Lebih baik jika anda telah menguasai Vue 3)
• Pengetahuan asas UniApp (termasuk konsep asas seperti templat projek, halaman, komponen, dll.)
• Kaedah susun atur UniApp (flex, grid, kedudukan, dsb.)
• Pakej kebergantungan npm yang diperlukan oleh UniApp (jika npm digunakan untuk mengurus kebergantungan)

2 TabBar dalam UniApp

Dalam UniApp, TabBar terdiri daripada berbilang Ia terdiri daripada dua tab navigasi bawah, setiap tab boleh memaparkan halaman, dan pengguna boleh menyemak imbas halaman yang berbeza dalam aplikasi dengan mengklik tab yang sepadan.

TabBar boleh dipaparkan di seluruh aplikasi atau di halaman tertentu. TabBar yang muncul di seluruh aplikasi dipanggil TabBar global, manakala TabBar yang muncul dalam halaman tertentu dipanggil TabBar tempatan. Setiap halaman boleh menyesuaikan sama ada untuk memaparkan TabBar, dengan itu menyedari paparan dan menyembunyikan TabBar.

3. Bagaimana untuk mengawal paparan dan penyembunyian TabBar dalam UniApp

3.1 Menggunakan fail konfigurasi halaman

Dalam UniApp, setiap halaman mempunyai fail konfigurasi, yang boleh dikonfigurasikan Tetapkan dalam fail sama ada halaman semasa perlu memaparkan TabBar bawah. Dalam fail pages.json dalam direktori akar projek, anda boleh menetapkan gaya dan laluan halaman TabBar global.

Dalam direktori tempat xxx.vue fail setiap halaman terletak, anda boleh mencipta xxx.json fail konfigurasi (di mana xxx mewakili nama halaman semasa). Dalam fail xxx.json, anda boleh mengawal sama ada TabBar bahagian bawah perlu disembunyikan pada halaman semasa dengan menetapkan atribut navigationBarHidden.

Berikut ialah contoh:

{
  "navigationBarTitleText": "我的页面",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarHidden": true  // 控制底部 TabBar 的显示和隐藏
}

Dalam fail konfigurasi ini, tetapkan atribut navigationBarHidden kepada true untuk menyembunyikan TabBar bahagian bawah dan tetapkannya kepada false kepada paparkan TabBar bahagian bawah . Melalui kaedah ini, setiap halaman boleh mengawal paparan dan penyembunyian TabBar bahagian bawah.

3.2 Menggunakan pencampuran Vue

Selain mengawal paparan dan penyembunyian TabBar dalam fail konfigurasi halaman, anda juga boleh menggunakan mixin dalam komponen Vue untuk mengawal paparan dan penyembunyian TabBar. Kaedah ini lebih fleksibel dan sesuai untuk situasi di mana paparan dan penyembunyian TabBar perlu dikawal secara dinamik berdasarkan syarat tertentu pada halaman.

Berikut ialah contoh:

export default {
  mixins: [tabbarMixin],  // 引入 mixin 配置
  data() {
    return {
      isShowTabBar: true  // 控制 TabBar 显示和隐藏的状态
    }
  }
}

Dalam contoh di atas, objek mixin bernama mixins diperkenalkan melalui atribut tabbarMixin, yang mengkonfigurasi TabBar bawah dan bersembunyi. Dengan mentakrifkan pembolehubah keadaan bernama isShowTabBar, anda boleh mengawal paparan dan penyembunyian TabBar bawah dalam komponen secara dinamik.

Berikut ialah konfigurasi khusus objek mixin:

export const tabbarMixin = {
  onShow() {
    // 显示底部 TabBar
    uni.setTabBarStyle({
      selectedColor: "#007AFF",
      backgroundColor: "#ffffff",
      borderStyle: "black"
    })
    uni.showTabBar()
  },
  onHide() {
    // 隐藏底部 TabBar
    uni.hideTabBar()
  }
}

Dengan memanggil kaedah uni.showTabBar() dan uni.hideTabBar(), anda boleh mengawal paparan dan penyembunyian TabBar bahagian bawah. Selain itu, TabBar bahagian bawah boleh digayakan melalui kaedah uni.setTabBarStyle().

4. Nota lain

Dalam UniApp, apabila mengawal paparan dan menyembunyikan TabBar bahagian bawah, anda perlu memberi perhatian kepada isu berikut:

1. Kawalan paparan TabBar dengan mengubah suai fail konfigurasi halaman dan tersembunyi, mesti berkuat kuasa pada halaman semasa Jika anda perlu mengubah suai paparan dan status tersembunyi TabBar pada halaman lain, anda perlu mengubah suainya dalam fail konfigurasi yang sepadan. muka surat.
2. Memandangkan TabBar bahagian bawah dalam UniApp dilaksanakan melalui komponen, komponen tersebut hendaklah diletakkan di bahagian bawah halaman semasa susun atur halaman untuk memudahkan operasi klik pengguna.
3. Apabila menggunakan objek mixin untuk mengawal paparan dan menyembunyikan TabBar bahagian bawah, anda perlu memberi perhatian kepada penamaan objek mixin untuk mengelakkan konflik penamaan.

5. Ringkasan

Melalui pengenalan artikel ini, kami mempelajari cara mengawal paparan dan penyembunyian TabBar bahagian bawah dalam UniApp. Kita boleh mengawal paparan dan penyembunyian TabBar bahagian bawah dengan mengubah suai fail konfigurasi halaman atau menggunakan objek mixin, yang sangat fleksibel dan boleh disesuaikan. Pada masa yang sama, anda perlu memberi perhatian untuk mengikuti spesifikasi reka bentuk tertentu dalam aplikasi sebenar dan meletakkan TabBar di bahagian bawah halaman untuk memudahkan operasi pengguna.

Atas ialah kandungan terperinci Bagaimana untuk mengawal paparan dan menyembunyikan bar tab dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!