Fermez la barre supérieure de la page de démarrage d'Uniapp

Ces dernières années, avec le développement rapide de l'Internet mobile, le développement de diverses applications mobiles et petits programmes est devenu de plus en plus populaire. En tant que framework de développement moderne, Uniapp peut développer plusieurs plates-formes en même temps et est très populaire parmi les développeurs. Cependant, lors du développement d'Uniapp, nous devons parfois fermer la barre supérieure de la page de démarrage, ce qui n'est pas facile à faire.

Dans cet article, nous verrons comment fermer la barre supérieure de la page de démarrage d'Uniapp. Cela aidera les développeurs à mieux maîtriser les compétences de développement d'Uniapp.

1. Page de démarrage d'Uniapp

Avant de commencer à parler de la façon de fermer la barre supérieure de la page de démarrage d'Uniapp, nous devons d'abord comprendre la page de démarrage d'Uniapp.

La page de démarrage d'Uniapp fait référence à l'interface de bienvenue lorsque l'application ou le mini-programme est ouvert pour la première fois. Son design est beau, simple et intuitif. Le rôle de la page de démarrage est d'aider les utilisateurs à mieux se familiariser avec notre application et de fournir aux utilisateurs une interface d'informations significative au démarrage du programme.

Dans Uniapp, nous pouvons définir la page de lancement en définissant "appLaunch": true dans le fichier manifest.json, comme indiqué ci-dessous :

{
  "appLaunch": true,
  "pages": [
    "pages/home/home"
  ]
}

2. Désactivez le démarrage d'Uniapp Barre supérieure de la page

Parfois, nous souhaitons désactiver la barre supérieure de la page de démarrage d'Uniapp pour rendre la page plus concise et plus belle. Cependant, lors du développement réel, nous avons constaté que fermer la barre supérieure n’était pas si simple.

Après quelques recherches et essais, nous avons découvert que nous pouvons désactiver la barre supérieure de la page de démarrage d'Uniapp via les deux méthodes suivantes :

1. Définir dans l'application .vue La propriété navigationBarHidden est true

Dans le fichier App.vue d'Uniapp, nous pouvons fermer la barre supérieure en définissant la propriété navigationBarHidden sur true. L'exemple de code est le suivant : #🎜🎜. #

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      navigationBarHidden: true // 隐藏顶部栏
    }
  }
}
</script>

#🎜🎜 #Parmi eux, la valeur par défaut de l'attribut navigationBarHidden est false, ce qui signifie que la barre supérieure est affichée. Lorsqu'elle est définie sur true, la barre supérieure sera masquée.

Définissez le style de la barre supérieure dans la balise de style d'App.vue

2. Si nous voulons contrôler précisément le style du haut barre, comme changer la couleur d'arrière-plan ou la couleur de la police, nous pouvons définir le style de la barre supérieure dans la balise de style du fichier App.vue. L'exemple de code est le suivant :

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style>
/* 关闭顶部栏 */
.uni-page-head {
  display: none;
}
</style>

In this. Par exemple, nous définissons l'attribut d'affichage .uni-page-head pour fermer la barre supérieure. L’avantage de cette méthode est qu’elle permet de contrôler précisément le style de la barre supérieure, mais l’inconvénient est qu’elle nécessite de réécrire le style.

3. Résumé

Dans le développement Uniapp, le design de la page de démarrage est un maillon important. Grâce à la méthode décrite dans cet article, fermer la barre supérieure de la page de démarrage d'Uniapp peut rendre notre page plus concise et plus belle. Nous pouvons y parvenir en définissant l'attribut navigationBarHidden ou en définissant l'attribut d'affichage de .uni-page-head dans le style.

En bref, Uniapp, en tant que framework de développement moderne, est puissant, flexible et très adapté au développement d'applications mobiles. Dans le développement réel, nous devons étudier continuellement et en profondeur les technologies associées d'Uniapp afin de mieux maîtriser les compétences de développement d'Uniapp.

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!