Comment implémenter la fonction cachée de navigation inférieure dans Uniapp

Lors de l'utilisation d'uniapp pour développer des applications mobiles, l'existence de la barre de navigation inférieure peut aider les utilisateurs à changer rapidement de page et de fonction, améliorant ainsi l'expérience utilisateur et l'efficacité opérationnelle. Cependant, dans certains cas particuliers, nous devrons peut-être masquer la barre de navigation inférieure. Cet article explique comment masquer la navigation inférieure dans uniapp.

1. Utilisation de base de la barre de navigation inférieure

La barre de navigation inférieure d'uniapp est configurée dans le fichier pages.json, où nous pouvons définir le style de la barre de menu inférieure, l'icône, la page de saut et d'autres informations. Voici un exemple de code simple :

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

Dans le code ci-dessus, le tableau "pages" est utilisé pour configurer toutes les informations de la page et l'objet "tabBar" est utilisé pour configurer le style et les informations de saut de la barre de menu inférieure. Parmi eux, chaque objet du tableau "list" représente un élément de menu inférieur, notamment "pagePath" (chemin de page de saut), "text" (texte de l'élément de menu), "iconPath" (chemin d'accès à l'icône lorsqu'il n'est pas sélectionné) et "selectedIconPath". » (chemin de l'icône lorsqu'il est sélectionné) et d'autres attributs.

2. Comment masquer la barre de navigation inférieure

Dans certains scénarios, nous devrons peut-être masquer la barre de navigation inférieure pour obtenir des effets interactifs spéciaux ou un affichage plein écran et d'autres fonctions. Dans uniapp, il existe plusieurs façons de masquer la barre de navigation inférieure :

1. Utilisez les méta-informations de vue-router

Vous pouvez définir certains attributs spéciaux de la page via les méta-informations de vue-router, par exemple masquer la barre de navigation inférieure. Lors de la configuration de vue-router dans pages.json, vous pouvez ajouter le champ méta, ajouter les informations requises dans méta et utiliser this.$route.meta.xxx pour l'obtenir dans le composant de page.

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

Dans le code ci-dessus, définissez si la page doit afficher la barre de navigation inférieure en ajoutant le champ "meta" dans pages.json, qui peut être obtenu via this.$route.meta.showTabbar dans le composant.

Dans les pages où la barre de navigation inférieure est masquée, nous devons définir manuellement le style en bas de la page, par exemple, définir un div avec une hauteur égale à la hauteur de la barre de navigation inférieure pour remplacer la barre de navigation par assurez-vous que la page s’affiche normalement.

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

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

Dans le code ci-dessus, nous avons ajouté un div d'une hauteur de 100rpx en bas pour remplacer la barre de navigation inférieure.

2. Utilisez des variables globales dans app.vue pour contrôler si la barre de navigation inférieure est affichée

Dans le fichier d'entrée principal d'uniapp app.vue, nous pouvons définir une variable globale pour contrôler si la barre de navigation inférieure est affichée. La méthode de fonctionnement spécifique est la suivante :

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

Dans le code ci-dessus, nous déterminons si la barre de navigation inférieure doit être affichée en obtenant l'itinéraire de la page actuelle. Si elle doit être affichée, définissez la variable showTabBar sur true, sinon définissez-la sur false. Dans le composant app.vue, nous utilisons la directive v-if pour décider d'afficher ou non la barre de navigation inférieure en fonction de la valeur de showTabBar.

Dans la page où la barre de navigation inférieure est masquée, nous devons également ajouter un div d'une hauteur égale à la hauteur de la barre de navigation inférieure pour garantir que la page s'affiche normalement.

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

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

3. Utilisez la liaison dynamique dans le composant uni-tab-bar pour contrôler si la barre de navigation inférieure est affichée

uni-tab-bar est le composant de barre d'onglets par défaut fourni par uniapp, où nous pouvons utiliser la liaison dynamique pour contrôler l'affichage et le masquage de la barre de navigation inférieure. La méthode de fonctionnement spécifique est la suivante :

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

Dans le code ci-dessus, nous définissons un attribut caché pour contrôler l'affichage et le masquage de la barre de navigation inférieure. Lors de l'introduction du composant uni-tab-bar dans le composant page, nous pouvons contrôler si la barre de navigation inférieure est affichée en liant dynamiquement l'attribut caché.

Dans les pages où la barre de navigation inférieure est masquée, nous devons définir manuellement le style en bas de la page, par exemple en ajoutant un div d'une hauteur égale à la hauteur de la barre de navigation inférieure pour remplacer la barre de navigation.

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

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

Voici trois méthodes ci-dessus pour masquer la barre de navigation inférieure dans uniapp. Lorsque vous l'utilisez, vous devez choisir la méthode la plus appropriée en fonction de vos propres besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!