L'icône de la barre de navigation supérieure d'Uniapp change de position

Avec le développement rapide de l'Internet mobile, de plus en plus de développeurs recherchent et utilisent des outils de développement multiplateformes. En tant qu'outil de développement multiplateforme, la grande facilité d'utilisation et les excellentes performances d'Uniapp ont été reconnues et recherchées par de nombreux développeurs et entreprises. Cependant, lors du processus d'utilisation d'Uniapp pour le développement, vous rencontrerez également certains problèmes et difficultés, tels que le changement de position de l'icône de la barre de navigation supérieure.

La barre de navigation supérieure d'Uniapp est affichée en haut de l'écran par défaut, et les icônes de la barre de navigation sont également affichées sur le côté gauche de l'écran par défaut. Mais dans le processus de développement proprement dit, nous devons parfois ajuster la position des icônes dans la barre de navigation, par exemple en affichant les icônes sur le côté droit de l'écran ou au centre. Alors comment y faire face ? Permettez-moi maintenant de partager comment je gère ce problème dans le développement réel.

Première étape : Modifier le style de la barre de navigation

{
  "navigationBarTitleText": "页面标题",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

Dans Uniapp, nous pouvons changer la position de l'icône de la barre de navigation supérieure en modifiant le style de la barre de navigation. Tout d'abord, nous devons changer la valeur de navigationBarTextStyle en white, afin que le texte dans la barre de navigation devienne blanc et se mélange à la couleur d'arrière-plan de la barre de navigation. Ensuite, nous ajoutons le code suivant dans pages.json : navigationBarTextStyle 的值改为 white，这样导航栏中的文字就会变成白色，与导航栏背景色融为一体。然后我们在 pages.json 中添加如下代码：

"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle": "custom",

这里的 navigationBarTextStyle 和 navigationBarBackgroundColor 是为了保证导航栏风格的一致性，navigationStyle 的值为 custom，是为了将导航栏变成自定义的样式，这样我们就可以在代码中自由地修改导航栏的布局和样式了。

第二步：设置导航栏的内容

<view class="navigationBar">
  <view class="navigationBar-content">
    <view class="navigation-item" @click="goBack">
      <image src="/static/back.png" />
    </view>
    <view class="navigation-title">
      页面标题
    </view>
    <view class="navigation-item" @click="goHome">
      <image src="/static/home.png" />
    </view>
  </view>
</view>

我们需要在页面中添加一个自定义的导航栏，然后在 navigation-item 中添加图标。当图标被点击时，我们可以通过绑定的方法来实现返回或前往主页。

第三步：设置导航栏的样式

.navigationBar {
  width: 100%;
  height: 44px;
  background-color: #ffffff;
  padding-top: 20px;
  box-sizing: border-box;
}

.navigationBar-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigation-item {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation-title {
  font-size: 16px;
  font-weight: bold;
}

最后我们需要在 css 文件中设置自定义导航栏的样式，包括 navigationBar，navigationBar-content 和 navigation-itemrrreee

Les navigationBarTextStyle et navigationBarBackgroundColor ici sont destinés à assurer la cohérence du style de la barre de navigation. . La valeur de navigationStyle est custom, qui consiste à changer la barre de navigation en un style personnalisé, afin que nous puissions modifier librement la disposition et le style de la barre de navigation dans le fichier. code.

Étape 2 : Définir le contenu de la barre de navigation

rrreee

Nous devons ajouter une barre de navigation personnalisée à la page, puis ajouter l'icône dans navigation-item. Lorsque l'on clique sur l'icône, nous pouvons revenir ou accéder à la page d'accueil via la méthode de liaison. 🎜🎜Étape 3 : Définir le style de la barre de navigation🎜rrreee🎜Enfin, nous devons définir le style de la barre de navigation personnalisée dans le fichier css, y compris navigationBar, navigationBar -La largeur, la hauteur et l'alignement du contenu et navigation-item. 🎜🎜Grâce aux étapes ci-dessus, nous pouvons modifier la position de l'icône de la barre de navigation en haut d'Uniapp pour obtenir l'effet de personnalisation de la barre de navigation. Dans le même temps, cette méthode peut également être appliquée à d’autres scénarios nécessitant une personnalisation de la barre de navigation, comme l’ajout d’un champ de recherche ou d’une liste déroulante dans la barre de navigation. 🎜🎜En bref, Uniapp, en tant qu'outil de développement multiplateforme, a été privilégié par de nombreux développeurs pour sa grande facilité d'utilisation et ses excellentes performances. Lors de l'utilisation, nous devons être doués pour explorer et innover, et partager et communiquer activement pour promouvoir conjointement le développement de l'Internet mobile. 🎜

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!