範例示範uniapp如何實作自訂導覽列-uni-app-PHP中文網

隨著行動裝置應用程式的發展，導覽列成為了許多應用程式必備的功能之一。而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;
}

登入後複製

在樣式表中，我們主要對導覽列和狀態列的高度、背景顏色、字體大小等進行了調整。在實際中，也可以根據需要對樣式進行調整。