示例演示uniapp如何实现自定义导航栏-uni-app-PHP中文网

首页

web前端

uni-app

示例演示uniapp如何实现自定义导航栏

PHPz

Apr 19, 2023 am 11:41 AM

随着移动端应用的发展，导航栏成为了许多应用必备的功能之一。而Uni-app是一款可以同时开发多个移动端应用（包括iOS、Android等）的全栈式框架，它提供了丰富的组件以及API，方便开发者快速复用和定制应用功能。

在Uni-app中，要实现导航栏可以使用uni-ui组件库中的导航栏组件，也可以使用自定义组件的方式进行实现。下面我们将通过实例来演示如何实现自定义导航栏。

1. 创建页面

首先，我们需要在pages文件夹下创建一个新的页面，可以通过Uni-app提供的快捷方式进行创建。在该页面中，我们需要设置页面头部的背景颜色和标题等信息，同时将导航栏组件引入该页面。

在页面的头部添加下列代码块：

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

以上代码中，navbar是导航栏的样式容器，navbar-title是标题部分容器，title-text是标题文本。

2. 定义导航栏和状态栏

接下来，我们将在当前页面的样式表（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;
}

在样式表中，我们主要对导航栏和状态栏的高度、背景颜色、字体大小等进行了调整。需要注意的是，状态栏是IOS中的一个特殊区域，需要单独处理。

3. 如何处理状态栏

在状态栏的处理上，需要根据手机的不同系统进行处理。以下是一个简单的示例代码，该代码可以将状态栏的文字颜色设置为白色，并且在IOS系统上，将状态栏的背景色与导航栏保持一致。

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

在以上代码中，我们使用了uni.setNavigationBarColor()方法来设置状态栏的样式。根据不同的系统，我们可以设置不同的颜色。其中，frontColor表示状态栏的文字颜色，backgroundColor表示状态栏的背景颜色。

4. 实现导航栏返回按钮和右侧按钮

在实际应用中，通常需要添加导航栏的返回按钮和右侧按钮。在Uni-app中，我们可以使用uni-ui组件库中的nav-bar组件来实现这个功能，也可以使用自定义组件的方式。

下面，我们将演示自定义导航栏返回按钮和右侧按钮的实现方式。

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

在以上代码中，我们使用了自定义的返回按钮和右侧按钮。其中，back函数是返回按钮的点击事件处理函数，onFinish函数是右侧按钮的点击事件处理函数。

/* 样式表 */
.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;
}

在样式表中，我们主要对导航栏和状态栏的高度、背景颜色、字体大小等进行了调整。在实际中，也可以根据需要对样式进行调整。