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

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

為了避免遮擋用戶手機(jī)頂部狀態(tài)欄，還需要獲取用戶手機(jī)狀態(tài)欄的高度，并在在每個(gè)頁(yè)面中添加一個(gè)占位用的 view標(biāo)簽來(lái)防止遮擋用戶狀態(tài)欄。

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

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

在每個(gè)頁(yè)面中添加一個(gè)占位用的 view標(biāo)簽，背景色與自定義的狀態(tài)欄的背景色相同。

不過(guò)自定義的狀態(tài)欄背景色一般不要設(shè)置成黑色或者白色，因?yàn)榇蠖鄶?shù)手機(jī)的狀態(tài)欄字體顏色就是黑色和白色。

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

//index.js const app = getApp()Page({data: {//從全局變量獲取狀態(tài)欄高度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; }

顯示效果如下：

最后就可以在下面添加自定義的狀態(tài)欄，自定義狀態(tài)欄的高度一般剛好超過(guò)膠囊的下邊， 這個(gè)高度大概是系統(tǒng)狀態(tài)欄的2倍。

代碼如下：

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

顯示效果如下：

使用的時(shí)候在外面再包裹一層view標(biāo)簽：

<!--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%; }

甚至還可以弄出居中標(biāo)題的效果：

<!--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: '這是一個(gè)居中標(biāo)題'},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; }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。