Das Uniapp-Symbol in der oberen Navigationsleiste ändert seine Position

Mit der rasanten Entwicklung des mobilen Internets erforschen und nutzen immer mehr Entwickler plattformübergreifende Entwicklungstools. Als plattformübergreifendes Entwicklungstool wurden die leistungsstarke Benutzerfreundlichkeit und die hervorragende Leistung von Uniapp von vielen Entwicklern und Unternehmen anerkannt und nachgefragt. Bei der Verwendung von Uniapp für die Entwicklung treten jedoch auch einige Probleme und Schwierigkeiten auf, z. B. die Änderung der Position des Symbols in der oberen Navigationsleiste.

Die obere Navigationsleiste von Uniapp wird standardmäßig oben auf dem Bildschirm angezeigt, und die Symbole in der Navigationsleiste werden standardmäßig auch auf der linken Seite des Bildschirms angezeigt. Im eigentlichen Entwicklungsprozess müssen wir jedoch manchmal die Position der Symbole in der Navigationsleiste anpassen, z. B. die Anzeige der Symbole auf der rechten Seite des Bildschirms oder in der Mitte. Wie also damit umgehen? Lassen Sie mich erzählen, wie ich mit diesem Problem in der tatsächlichen Entwicklung umgehe.

Schritt eins: Ändern Sie den Stil der Navigationsleiste

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

In Uniapp können wir die Position des oberen Navigationsleistensymbols ändern, indem wir den Stil der Navigationsleiste ändern. Zuerst müssen wir den Wert von navigationBarTextStyle in white ändern, damit der Text in der Navigationsleiste weiß wird und mit der Hintergrundfarbe der Navigationsleiste verschmilzt. Dann fügen wir den folgenden Code in pages.json hinzu: 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

Das obige ist der detaillierte Inhalt vonDas Uniapp-Symbol in der oberen Navigationsleiste ändert seine Position. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!