微信小程序自定义状态栏

最新推荐文章于 2024-09-09 17:06:52 发布

H_c_l

最新推荐文章于 2024-09-09 17:06:52 发布

阅读量1.8k

点赞数 2

分类专栏：小程序js 文章标签： html5 css css3 html javascript

本文链接：https://blog.csdn.net/H_c_l/article/details/107227196

版权

本文介绍了如何在微信小程序中自定义状态栏，通过修改app.json的windows字段，获取并适应用户手机状态栏高度，以及在每个页面添加占位view来避免遮挡。同时，文章建议状态栏背景色避免使用黑色或白色，并提供了相应的js、wxml和wxss代码示例，展示最终的显示效果，包括如何实现居中标题的自定义状态栏。

摘要由CSDN通过智能技术生成

首先修改 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 ()