So implementieren Sie die versteckte Funktion der unteren Navigation in Uniapp

Bei der Verwendung von Uniapp zur Entwicklung mobiler Anwendungen kann die Existenz der unteren Navigationsleiste den Benutzern helfen, schnell zwischen Seiten und Funktionen zu wechseln und so die Benutzererfahrung und die betriebliche Effizienz zu verbessern. In einigen Sonderfällen müssen wir jedoch möglicherweise die untere Navigationsleiste ausblenden. In diesem Artikel erfahren Sie, wie Sie die untere Navigationsleiste in Uniapp ausblenden.

1. Grundlegende Verwendung der unteren Navigationsleiste

Die untere Navigationsleiste von uniapp wird in der Datei „pages.json“ konfiguriert, in der wir den Stil der unteren Menüleiste, das Symbol, die Sprungseite und andere Informationen festlegen können. Das Folgende ist ein einfacher Beispielcode:

{
  "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"
  }
}

Im obigen Code wird das Array „pages“ zum Konfigurieren aller Seiteninformationen und das Objekt „tabBar“ zum Konfigurieren des Stils und der Sprunginformationen der unteren Menüleiste verwendet. Unter diesen stellt jedes Objekt im Array „list“ einen unteren Menüpunkt dar, einschließlich „pagePath“ (Sprungseitenpfad), „text“ (Menüpunkttext), „iconPath“ (Symbolpfad, wenn nicht ausgewählt) und „selectedIconPath“. ” (Symbolpfad, wenn ausgewählt) und andere Attribute.

2. So blenden Sie die untere Navigationsleiste aus

In einigen Szenarien müssen wir möglicherweise die untere Navigationsleiste ausblenden, um spezielle interaktive Effekte oder eine Vollbildanzeige und andere Funktionen zu erzielen. In uniapp gibt es mehrere Möglichkeiten, die untere Navigationsleiste auszublenden:

1. Verwenden Sie die Metainformationen von Vue-Router.

Sie können einige spezielle Attribute der Seite über die Metainformationen von Vue-Router festlegen, z. B. ob dies erfolgen soll Blenden Sie die untere Navigationsleiste aus. Wenn Sie den Vue-Router in „pages.json“ konfigurieren, können Sie das Metafeld hinzufügen, die erforderlichen Informationen in Meta hinzufügen und diese mit this.$route.meta.xxx in der Seitenkomponente abrufen.

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

Legen Sie im obigen Code fest, ob die Seite die untere Navigationsleiste anzeigen muss, indem Sie das Feld „Meta“ in page.json hinzufügen, das über this.$route.meta.showTabbar in der Komponente abgerufen werden kann.

Auf Seiten, auf denen die untere Navigationsleiste ausgeblendet ist, müssen wir den Stil am unteren Rand der Seite manuell festlegen. Legen Sie beispielsweise ein Div mit einer Höhe fest, die der Höhe der unteren Navigationsleiste entspricht, um die Navigationsleiste durch zu ersetzen Stellen Sie sicher, dass die Seite normal angezeigt wird.

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

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

Im obigen Code haben wir unten ein Div mit einer Höhe von 100 rpx hinzugefügt, um die untere Navigationsleiste zu ersetzen.

2. Verwenden Sie globale Variablen in app.vue, um zu steuern, ob die untere Navigationsleiste angezeigt wird.

In der Uniapp-Haupteintragsdatei app.vue können wir eine globale Variable definieren, um zu steuern, ob die untere Navigationsleiste angezeigt wird. Die spezifische Betriebsmethode lautet wie folgt:

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

Im obigen Code bestimmen wir, ob die untere Navigationsleiste angezeigt werden muss, indem wir die aktuelle Seitenroute abrufen. Wenn es angezeigt werden muss, setzen Sie die Variable showTabBar auf true, andernfalls auf false. In der app.vue-Komponente verwenden wir die v-if-Direktive, um basierend auf dem Wert von showTabBar zu entscheiden, ob die untere Navigationsleiste angezeigt werden soll.

Auf der Seite, auf der die untere Navigationsleiste ausgeblendet ist, müssen wir außerdem ein Div mit einer Höhe hinzufügen, die der Höhe der unteren Navigationsleiste entspricht, um sicherzustellen, dass die Seite normal angezeigt wird.

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

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

3. Verwenden Sie die dynamische Bindung in der uni-tab-bar-Komponente, um zu steuern, ob die untere Navigationsleiste angezeigt wird.

uni-tab-bar ist die von uniapp bereitgestellte Standard-Tab-Leistenkomponente, in der wir die dynamische Bindung an Control verwenden können das Ein- und Ausblenden der unteren Navigationsleiste. Die spezifische Operationsmethode ist wie folgt:

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

Im obigen Code definieren wir ein verstecktes Attribut, um die Anzeige und das Ausblenden der unteren Navigationsleiste zu steuern. Wenn wir die Uni-Tab-Bar-Komponente in die Seitenkomponente einführen, können wir steuern, ob die untere Navigationsleiste angezeigt wird, indem wir das ausgeblendete Attribut dynamisch binden.

Auf Seiten, auf denen die untere Navigationsleiste ausgeblendet ist, müssen wir den Stil am unteren Rand der Seite manuell festlegen, z. B. durch Hinzufügen eines Div mit einer Höhe, die der Höhe der unteren Navigationsleiste entspricht, um die Navigationsleiste zu ersetzen.

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

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

Die oben genannten drei Methoden zum Ausblenden der unteren Navigationsleiste in Uniapp. Bei der Verwendung sollten Sie die für Ihre Bedürfnisse am besten geeignete Methode wählen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die versteckte Funktion der unteren Navigation in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!