Example demonstrates how uniapp implements a custom navigation bar

With the development of mobile applications, the navigation bar has become one of the necessary functions for many applications. Uni-app is a full-stack framework that can develop multiple mobile applications (including iOS, Android, etc.) at the same time. It provides a wealth of components and APIs to facilitate developers to quickly reuse and customize application functions.

In Uni-app, to implement the navigation bar, you can use the navigation bar component in the uni-ui component library, or you can use a custom component to implement it. Below we will use an example to demonstrate how to implement a custom navigation bar.

1. Create a page

First, we need to create a new page under the pages folder, which can be created through the shortcut provided by Uni-app. In this page, we need to set the background color and title of the page header, and introduce the navigation bar component to the page.

Add the following code block at the head of the page:

<template>
  <div class="container">
    <view class="navbar" style="background-color: #007aff">
      <status-bar></status-bar>
      <view class="navbar-title">
        <text class="title-text">Uni-app导航栏示例</text>
      </view>
    </view>
    // 页面内容部分
  </div>
</template>

In the above code, navbar is the style container of the navigation bar, navbar-title is the title part container, and title-text is the title text.

2. Define the navigation bar and status bar

Next, we will define the styles of the navigation bar and status bar in the style sheet (style) of the current page. In practical applications, the style can be adjusted as needed. The following is a simple style sheet example:

.container {
  height: 100%;
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
}
.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -44px;
}
.title-text {
  color: #fff;
  font-size: 18px;
}

In the style sheet, we mainly adjust the height, background color, font size, etc. of the navigation bar and status bar. It should be noted that the status bar is a special area in iOS and needs to be handled separately.

3. How to deal with the status bar

The status bar needs to be processed according to different systems of the mobile phone. The following is a simple sample code that can set the text color of the status bar to white, and on the iOS system, keep the background color of the status bar consistent with the navigation bar.

<template>
  <div class="container">
    <view class="navbar" style="background-color: #007aff">
      <status-bar style="background-color: #007aff" border-style="white"></status-bar>
      <view class="navbar-title">
        <text class="title-text">Uni-app导航栏示例</text>
      </view>
    </view>
    // 页面内容部分
  </div>
</template>

<style>
.container {
  height: 100%;
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
}
.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -44px;
}
.title-text {
  color: #fff;
  font-size: 18px;
}
</style>

<script>
  export default {
    onNavigationBarButtonTap() {
      console.log('导航栏按钮被点击了');
    },
  };
  uni.getSystemInfo({
    success: res => {
      if (/iphone/i.test(res.model)) {
        // 如果是IOS系统
        uni.setNavigationBarColor({
          frontColor: '#ffffff', // 文字颜色
          backgroundColor: '#007aff', // 背景颜色
          animation: {
            duration: 400,
            timingFunc: 'easeIn',
          },
        });
      } else if (/android/i.test(res.model)) {
        // 如果是Android系统
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#007aff',
          animation: {
            duration: 400,
            timingFunc: 'easeIn',
          },
        });
      }
    },
  })
</script>

In the above code, we use the uni.setNavigationBarColor() method to set the style of the status bar. Depending on the system, we can set different colors. Among them, frontColor represents the text color of the status bar, and backgroundColor represents the background color of the status bar.

4. Implement the return button and right button of the navigation bar

In practical applications, it is usually necessary to add the return button and right button of the navigation bar. In Uni-app, we can use the nav-bar component in the uni-ui component library to implement this function, or we can use a custom component.

Below, we will demonstrate how to implement the custom navigation bar return button and right button.

<template>
  <div class="container">
    <view class="navbar" style="background-color: #007aff">
      <nav-bar bg-color="#007aff" title="导航栏示例" @click-left="back" @click-right="onFinish"></nav-bar>
      <view class="navbar-title">
        <text class="title-text">Uni-app导航栏示例</text>
      </view>
    </view>
    // 页面内容部分
  </div>
</template>

In the above code, we use custom return button and right button. Among them, the back function is the click event processing function of the return button, and the onFinish function is the click event processing function of the right button.

/* 样式表 */
.container {
  height: 100%;
}
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
}
.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -44px;
}
.title-text {
  color: #fff;
  font-size: 18px;
}

In the style sheet, we mainly adjusted the height, background color, font size, etc. of the navigation bar and status bar. In practice, the style can also be adjusted as needed.

5. Summary

Through the above demonstration, we can see that Uni-app provides rich components and API support for the implementation of the navigation bar. By customizing components, we can easily implement personalized navigation bars. At the same time, through the processing of the status bar, we can also provide consistent visual effects on IOS and Android systems.

In order to improve the user's interactive experience, the design and implementation of the navigation bar is a very critical link. When using Uni-app, please pay attention to the collaboration of UI design and development in order to provide users with a first-class service experience.

The above is the detailed content of Example demonstrates how uniapp implements a custom navigation bar. For more information, please follow other related articles on the PHP Chinese website!