uniapp supprime le texte de navigation

La navigation est une partie très importante du processus de développement d'Uniapp. Cela peut aider les utilisateurs à mieux comprendre l'emplacement et les fonctions de la page actuelle. Cependant, dans certains cas, nous devrons peut-être supprimer le texte de navigation. Par exemple, en termes de style de conception, nous devons rendre la page plus concise et plus pure, et la suppression du texte de navigation peut atteindre cet objectif. Alors, comment supprimer le texte de navigation dans uniapp ?

Méthode 1 : Masquer le texte de navigation dans la page

Dans uniapp, le texte de navigation par défaut est défini via le fichier de configuration de routage. Par exemple, le code suivant :

"tabBar": {
    "color": "#999",
    "selectedColor": "#1aad19",
    "backgroundColor": "#fafafa",
    "borderStyle": "black",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }

Comme vous pouvez le constater, le texte de navigation de chaque onglet est défini dans l'attribut "text". Il suffit donc de masquer ce texte dans la page. La méthode spécifique consiste à définir la couleur du texte dans le fichier de style pour qu'elle soit la même que la couleur d'arrière-plan, ou à définir la taille de police du texte sur 0. L'exemple de code est le suivant :

<style>
  .uni-tab-item-text {
    font-size: 0;
  }
</style>

ou

<style>
  .uni-tab-item-text {
    color: #fafafa;
  }
</style>

#🎜🎜 #De cette façon, le texte de navigation peut être supprimé.

Méthode 2 : Utiliser des plug-ins

Si vous ne souhaitez pas écrire votre propre code pour supprimer le texte de navigation, vous pouvez également utiliser des plug-ins dans la communauté uniapp pour y parvenir. Par exemple, le plug-in uni-simple-router vous permet de supprimer très facilement le texte de navigation.

Tout d'abord, lorsque nous utilisons uni-simple-router, nous devons d'abord introduire les balises. La méthode spécifique consiste à ajouter le code suivant au fichier main.js :

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
Vue.prototype.$router = router

import 'uni-simple-router'

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

Ensuite, dans le fichier de configuration de routage, remplacez l'attribut text par l'attribut title. De cette façon, uni-simple-router peut prendre effet et gérer automatiquement le problème du titre de navigation. Par exemple, le code suivant :

{
  path: '/home',
  component: () => import('@/pages/home'),
  meta: {
    title: '首页'
  }
},
{
  path: '/user',
  component: () => import('@/pages/user'),
  meta: {
    title: '我的'
  }
}

Enfin, voyons comment utiliser uni-simple-router pour supprimer le texte de navigation. Dans la page, il suffit d'ajouter une fonction de cycle de vie avant Entrée et de définir le texte de navigation vide dans cette fonction. Le code spécifique est le suivant :

<script>
export default {
  beforeEnter(to, from, next) {
    uni.showTabBar()
    uni.setNavigationBarTitle({
      title: ''
    })
    next()
  }
}
</script>

De cette façon, lorsque la page passe à cette page, le titre de la barre de navigation deviendra vide. Si vous souhaitez supprimer le texte de navigation de toutes les pages, il vous suffit de définir globalement une fonction beforeEnter.

Résumé :

Les deux méthodes ci-dessus nous permettent de supprimer le texte de navigation. Si vous devez supprimer le texte de navigation sur une seule page, utilisez la première méthode ; si vous devez supprimer le texte de navigation sur toutes les pages, utilisez la deuxième méthode. Bien entendu, il existe d’autres moyens d’obtenir le même effet. Bref, vous pouvez choisir la méthode qui vous convient en fonction de vos besoins réels et de vos méthodes de développement.

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!