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

rrreee

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!