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>
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()
{ path: '/home', component: () => import('@/pages/home'), meta: { title: '首页' } }, { path: '/user', component: () => import('@/pages/user'), meta: { title: '我的' } }
<script> export default { beforeEnter(to, from, next) { uni.showTabBar() uni.setNavigationBarTitle({ title: '' }) next() } } </script>
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!