uniapp 상단 네비게이션 바 아이콘 위치 변경

모바일 인터넷의 급속한 발전으로 인해 점점 더 많은 개발자가 크로스 플랫폼 개발 도구를 연구하고 사용하고 있습니다. 크로스 플랫폼 개발 도구인 Uniapp의 강력한 사용 용이성과 탁월한 성능은 많은 개발자와 기업에서 인정받고 추구해 왔습니다. 하지만 유니앱을 개발에 활용하는 과정에서 상단 내비게이션 바 아이콘의 위치가 바뀌는 등의 문제와 어려움도 겪게 됩니다.

Uniapp의 상단 네비게이션 바는 기본적으로 화면 상단에 표시되며, 네비게이션 바의 아이콘도 기본적으로 화면 왼쪽에 표시됩니다. 하지만 실제 개발 과정에서는 아이콘을 화면 오른쪽이나 중앙에 표시하는 등 내비게이션 바의 아이콘 위치를 조정해야 하는 경우가 있습니다. 그렇다면 어떻게 처리해야 할까요? 실제 개발에서 이 문제를 어떻게 처리했는지 공유하겠습니다.

1단계: 네비게이션 바 스타일 수정

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

유니앱에서는 네비게이션 바 스타일을 수정하여 상단 네비게이션 바 아이콘의 위치를 ​​변경할 수 있습니다. 먼저 navigationBarTextStyle 값을 white로 변경하여 탐색 모음의 텍스트가 흰색이 되고 탐색 모음의 배경색과 혼합되도록 해야 합니다. 그런 다음 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

위 내용은 uniapp 상단 네비게이션 바 아이콘 위치 변경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!