uniapp top navigation bar icon changes position

With the rapid development of mobile Internet, more and more developers are researching and using cross-platform development tools. As a cross-platform development tool, Uniapp’s powerful ease of use and excellent performance have been recognized and sought after by many developers and enterprises. However, in the process of using Uniapp for development, you will also encounter some problems and difficulties, such as the change of the position of the top navigation bar icon.

Uniapp’s top navigation bar is displayed at the top of the screen by default, and the icons in the navigation bar are also displayed on the left side of the screen by default. But in the actual development process, sometimes we need to adjust the position of the icons in the navigation bar, such as displaying the icons on the right side of the screen or in the center. So how to deal with it? Let me share how I deal with this problem in actual development.

Step one: Modify the navigation bar style

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

In Uniapp, we can change the position of the top navigation bar icon by modifying the navigation bar style. First we need to change the value of navigationBarTextStyle to white, so that the text in the navigation bar will become white and blend with the background color of the navigation bar. Then we add the following code in pages.json:

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

The navigationBarTextStyle and navigationBarBackgroundColor here are to ensure the consistency of the navigation bar style , the value of navigationStyle is custom, which is to change the navigation bar into a custom style, so that we can freely modify the layout and style of the navigation bar in the code.

Step 2: Set the content of the navigation bar

<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>

We need to add a custom navigation bar to the page, and then add the icon in navigation-item. When the icon is clicked, we can return or go to the homepage through the binding method.

Step 3: Set the style of the navigation bar

.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;
}

Finally we need to set the style of the custom navigation bar in the css file, including navigationBar, the width, height and alignment of navigationBar-content and navigation-item.

Through the above steps, we can modify the position of the navigation bar icon at the top of Uniapp to achieve the effect of customizing the navigation bar. At the same time, this method can also be applied to other scenarios that require customizing the navigation bar, such as adding a search box or a navigation bar drop-down box.

In short, Uniapp, as a cross-platform development tool, has been favored by many developers for its powerful ease of use and excellent performance. During use, we should be good at exploring and innovating, and actively share and communicate to jointly promote the development of mobile Internet.

The above is the detailed content of uniapp top navigation bar icon changes position. For more information, please follow other related articles on the PHP Chinese website!