首先修改 app.json文件中的 windows字段如下：

{"pages": ["pages/index/index"],"window": {"navigationStyle": "custom"} }

為了避免遮擋用戶手機頂部狀態欄，還需要獲取用戶手機狀態欄的高度，并在在每個頁面中添加一個占位用的 view標簽來防止遮擋用戶狀態欄。

在 app.js文件添加如下代碼：

App({onLaunch: function() {wx.getSystemInfo({success: res=> {this.globalData.navHeight = res.statusBarHeight;},})},globalData: {userInfo: null,navHeight: 0,} })

在每個頁面中添加一個占位用的 view標簽，背景色與自定義的狀態欄的背景色相同。

不過自定義的狀態欄背景色一般不要設置成黑色或者白色，因為大多數手機的狀態欄字體顏色就是黑色和白色。

js文件、wxml文件和wxss文件如下：

//index.js const app = getApp()Page({data: {//從全局變量獲取狀態欄高度navHeight: app.globalData.navHeight,},onLoad: function () {},getUserInfo: function (e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} }) <!--index.wxml--> <view class='palce-holder-nav' style="height: {{navHeight}}px;"></view> /*app.wxss*/ .palce-holder-nav{width: 100%;background-color: red; }

顯示效果如下：

最后就可以在下面添加自定義的狀態欄，自定義狀態欄的高度一般剛好超過膠囊的下邊， 這個高度大概是系統狀態欄的2倍。

代碼如下：

<!--index.wxml--> <view class='palce-holder-nav' style="height: {{navHeight}}px;"></view> <view class='palce-holder-nav' style="height: {{2*navHeight}}px;"></view>

顯示效果如下：

使用的時候在外面再包裹一層view標簽：

<!--index.wxml--> <view class='custom-navbar'><view class='palce-holder-nav' style="height: {{navHeight}}px;"></view><view class='title' style="height: {{2*navHeight}}px;"></view> </view> /*app.wxss*/ .custom-navbar{width: 100%;background-color: red; } .palce-holder-nav{width: 100%; }

甚至還可以弄出居中標題的效果：

<!--index.wxml--> <view class='custom-navbar'><view class='palce-holder-nav' style="height: {{navHeight}}px;"></view><view class='title' style="height: {{2*navHeight}}px;"><view>{{title}}</view></view> </view> //index.js const app = getApp()Page({data: {navHeight: app.globalData.navHeight,title: '這是一個居中標題'},onLoad: function () {}, }) /*app.wxss*/ .custom-navbar{width: 100%;background-color: red; } .palce-holder-nav{width: 100%; } .title{width: 100%;display: flex;justify-content: center;align-items: center; } .title>view{width: fit-content;color: white; }

總結

以上是生活随笔為你收集整理的微信小程序自定义状态栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。