1. 程式人生 > 實用技巧 >uni-app 設定沉浸式的狀態列

uni-app 設定沉浸式的狀態列

uni-app 想要實現最頂部(手機預覽包含電量訊號的位置), 改成我們自己想要的,可以是透明狀態

解決方案:

在pages.json檔案中設定

1、全域性取消原生導航欄,註釋或者刪除即可。

2、在每個頁面單獨配置style,當navigationStyle設為custom或titleNView設為false時,原生導航欄不顯示:

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首頁", // 設定頁面預設標題內容
    "navigationBarTextStyle": "white", // 導航欄標題顏色及狀態列前景顏色,僅支援 black/white

    // #ifdef H5     "titleNView": false, // 設定預設導航欄隱藏     // #endif     "enablePullDownRefresh": false, // 設定頁面不可以下拉重新整理     "app-plus": { // 設定預設導航欄隱藏       "titleNView": false     }   } },

有個質疑,在檔案manifest.json 中,找到原始碼檢視,這裡有個可以設定開啟沉浸式,但是我設定下面這個檔案程式碼,不管設定不設定,也可以實現效果,嗯~~~,有待考究

可能在uniapp中,只設置上面程式碼即可,針對html5頁面版的是需要設定的

"app-plus" : {
  "statusbar" : {
    "immersed" : true, //開啟沉浸式
     "style" : "dark"
  },
   /* 模組配置 */
  "distribute" : {
     "ios" : {
      "UIReserveStatusbarOffset" : true /*IOS設定為沉浸欄模式*/
	},
  }
}