Bagaimana untuk melaksanakan fungsi tersembunyi navigasi bawah dalam uniapp

Apabila menggunakan uniapp untuk membangunkan aplikasi mudah alih, kewujudan bar navigasi bawah boleh membantu pengguna menukar halaman dan fungsi dengan cepat, meningkatkan pengalaman pengguna dan kecekapan operasi. Walau bagaimanapun, dalam beberapa kes khas, kami mungkin perlu menyembunyikan bar navigasi bawah Artikel ini akan memperkenalkan cara menyembunyikan navigasi bawah dalam uniapp.

1. Penggunaan asas bar navigasi bawah

Bar navigasi bawah Uniapp dikonfigurasikan dalam fail pages.json, di mana kita boleh menetapkan gaya, ikon dan lompatan bar menu bawah Maklumat tentang halaman yang akan diubah hala. Berikut ialah kod contoh mudah:

{
  "pages":[
    {
      "path":"pages/index/index",
      "name":"index",
      "style":{
        "navigationBarTitleText":"首页"
      }
    },
    {
      "path":"pages/user/user",
      "name":"user",
      "style":{
        "navigationBarTitleText":"个人中心"
      }
    }
  ],
  "tabBar":{
    "color":"#666",
    "selectedColor":"#4285f4",
    "backgroundColor":"#ffffff",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"static/img/tabbar/home.png",
        "selectedIconPath":"static/img/tabbar/home-selected.png"
      },
      {
        "pagePath":"pages/user/user",
        "text":"我的",
        "iconPath":"static/img/tabbar/user.png",
        "selectedIconPath":"static/img/tabbar/user-selected.png"
      }
    ]
  },
  "globalStyle":{
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTextStyle":"black"
  }
}

Dalam kod di atas, tatasusunan "halaman" digunakan untuk mengkonfigurasi semua maklumat halaman dan objek "tabBar" digunakan untuk mengkonfigurasi gaya dan maklumat lompat daripada bar menu bawah. Antaranya, setiap objek dalam tatasusunan "senarai" mewakili item menu bawah, termasuk "pagePath" (laluan halaman lompat), "teks" (teks item menu), "iconPath" (laluan ikon apabila tidak dipilih) dan "selectedIconPath" ” (laluan ikon apabila dipilih) dan atribut lain.

2. Cara menyembunyikan bar navigasi bawah

Dalam sesetengah senario, kita mungkin perlu menyembunyikan bar navigasi bawah untuk mencapai kesan interaktif khas atau paparan skrin penuh dan fungsi lain. Dalam uniapp, terdapat beberapa cara untuk menyembunyikan bar navigasi bawah:

1. Gunakan maklumat meta vue-router

Anda boleh menetapkan halaman melalui maklumat meta vue-router Beberapa sifat istimewa, seperti sama ada untuk menyembunyikan bar navigasi bawah. Apabila mengkonfigurasi vue-router dalam pages.json, anda boleh menambah medan meta, menambah maklumat yang diperlukan dalam meta dan menggunakan ini.$route.meta.xxx dalam komponen halaman untuk mendapatkannya.

{
  "pages": [
    {
      "path": "pages/index/index",
      "name": "index",
      "meta": {
        "showTabbar": true
      }
    },
    {
      "path": "pages/user/user",
      "name": "user",
      "meta": {
        "showTabbar": false
      }
    }
  ],
  "tabBar": {...}
}

Dalam kod di atas, tambah medan "meta" dalam pages.json untuk menetapkan sama ada halaman itu perlu memaparkan bar navigasi bawah, yang boleh diperoleh melalui ini.$route.meta.showTabbar dalam komponen.

Dalam halaman di mana bar navigasi bawah tersembunyi, kita perlu menetapkan gaya secara manual di bahagian bawah halaman, contohnya, tetapkan div dengan ketinggian yang sama dengan ketinggian bar navigasi bawah untuk menggantikan bar navigasi untuk memastikan halaman dipaparkan seperti biasa.

<template>
  <div>
    <div class="content">
      ...
    </div>
    <div class="placeholder"></div>
  </div>
</template>

<style>
  .placeholder {
    height: 100rpx;
  }
</style>

Dalam kod di atas, kami menambah div dengan ketinggian 100rpx di bahagian bawah untuk menggantikan bar navigasi bawah.

2. Gunakan pembolehubah global dalam app.vue untuk mengawal sama ada bar navigasi bawah dipaparkan

Dalam fail entri utama uniapp app.vue, kita boleh menentukan pembolehubah global untuk Mengawal sama ada bar navigasi bawah dipaparkan. Kaedah operasi khusus adalah seperti berikut:

<template>
  <div class="app">
    <uni-tab-bar v-if="showTabBar" />
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTabBar: true
    }
  },
  mounted() {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    this.showTabBar = currentPage.route.indexOf('/home') !== -1 // 在这里根据当前页面路由来设置showTabBar的值
  }
}
</script>

Dalam kod di atas, kami menentukan sama ada bar navigasi bawah perlu dipaparkan dengan mendapatkan laluan halaman semasa. Jika ia perlu dipaparkan, tetapkan pembolehubah showTabBar kepada benar, jika tidak tetapkannya kepada palsu. Dalam komponen app.vue, kami menggunakan arahan v-if untuk memutuskan sama ada untuk memaparkan bar navigasi bawah berdasarkan nilai showTabBar.

Dalam halaman di mana bar navigasi bawah disembunyikan, kami juga perlu menambah div dengan ketinggian yang sama dengan ketinggian bar navigasi bawah untuk memastikan halaman dipaparkan seperti biasa.

<template>
  <div>
    <div class="content">
      ...
    </div>
    <div class="placeholder"></div>
  </div>
</template>

<style>
  .placeholder {
    height: 100rpx;
  }
</style>

3. Gunakan pengikatan dinamik dalam komponen uni-tab-bar untuk mengawal sama ada bar navigasi bawah dipaparkan

uni-tab-bar ialah lalai yang disediakan oleh komponen bar Tab uniapp di mana kita boleh menggunakan pengikatan dinamik untuk mengawal paparan dan penyembunyian bar navigasi bawah. Kaedah operasi khusus adalah seperti berikut:

<template>
  <div class="tab-bar" :class="{&#39;hidden&#39;:hidden}">
    <div class="item" v-for="(tab,index) in tabList" :key="index" @click="switchTab(index)">
      <div class="icon" :class="{&#39;active&#39;:tab.active}">
        <img :src="tab.active ? tab.selectedIconPath : tab.iconPath" />
      </div>
      <div class="text" :class="{&#39;active&#39;:tab.active}">{{tab.text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    hidden: Boolean,
    tabList: Array,
    color: String,
    selectedColor: String,
    backgroundColor: String
  },
  methods: {
    switchTab(index) {
      this.$emit('switchTab', index)
    }
  }
}
</script>

<style>
  .hidden {
    display: none;
  }
</style>

Dalam kod di atas, kami mentakrifkan atribut tersembunyi untuk mengawal paparan dan penyembunyian bar navigasi bawah. Apabila memperkenalkan komponen uni-tab-bar ke dalam komponen halaman, kita boleh mengawal sama ada bar navigasi bawah dipaparkan dengan mengikat atribut tersembunyi secara dinamik.

Dalam halaman di mana bar navigasi bawah tersembunyi, kita perlu menetapkan gaya secara manual di bahagian bawah halaman, contohnya, tambahkan div dengan ketinggian yang sama dengan ketinggian bar navigasi bawah untuk menggantikan bar navigasi.

<template>
  <div class="content">
    ...
  </div>
  <div class="placeholder"></div>
</template>

<style>
  .placeholder {
    height: 100rpx;
  }
</style>

Di atas ialah tiga kaedah untuk menyembunyikan bar navigasi bawah dalam uniapp. Apabila menggunakannya, anda harus memilih kaedah yang paling sesuai mengikut keperluan anda sendiri.

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