技術標籤：# uni-appappweb

一、狀態列

手機螢幕最頂部的區域，包括了：訊號、運營商、電量等資訊。

通常APP都有屬於自己的色調風格，為了達到整體視覺美觀，通常會設定狀態列和標題欄的色調設定成一致。

型別：

1. 預設

2. 變色（設定顏色）

3. 透明（沉浸式）

4. 消失（全屏）

狀態列文字顏色

onReady() {
    plus.navigator.setStatusBarStyle('dark');   // light（白色）、dark（黑色）
}

是否全屏（關閉狀態列）

// 關閉
plus.navigator.setFullscreen(true); 

// 開啟
plus.navigator.setFullscreen(false); 

// 查詢應用當前是否全屏顯示！
console.log( "是否全屏："+(plus.navigator.isFullscreen()?"是":"否") );
 

二、標題欄

左側返回按鈕

返回事件

onBackPress() {
    uni.switchTab({
        url: "/pages/task/list"
    })
　　return true
}

動態顯示隱藏返回按鈕

// 當前webview
let pages = getCurrentPages()
let page = pages[pages.length - 1];
let currentWebview = page.$getAppWebview();
/ 當前標題欄
let titleNView = currentWebview.getStyle().titleNView
console.log(titleNView)
//列印結果
{
        "autoBackButton": true,
        "backgroundColor": "#F8F8F8",
        "dock": "top",
        "height": 44,
        "position": "dock",
        "statusbar": {},
        "tags": [],
        "titleColor": "#000000",
        "titleText": "紙板入庫",
        "type": "default"
}
titleNView.autoBackButton = false
currentWebview.setStyle({
    titleNView:titleNView
})    
 

中間標題

uni.setNavigationBarTitle({
    title: name
})

右側按鈕文字

動態改變右側按鈕文字

// 狀態列右側按鈕被點選
onNavigationBarButtonTap(e) {   //監聽導航欄按鈕點選
if (e.index === 0) {  
    if (e.text === "編輯") {  
      var currentWebview = this.$mp.page.$getAppWebview();  
      currentWebview.setTitleNViewButtonStyle(0, {  
          text: "完成",  
      });  
    } else {  
      var currentWebview = this.$mp.page.$getAppWebview();  
      currentWebview.setTitleNViewButtonStyle(0, {  
          text: "編輯",  
      });  
    }  
  }  
},