微信小程序自定义状态栏

首先修改 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;
}

微信小程序自定义状态栏相关推荐

微信小程序自定义状态栏navigationBar样式组件，适配所有机型
一.在app.json设置navigationStyle自定义 "window": {"navigationStyle": "custom" ...
微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局二.需求在导航栏中需要显示信息的"未读数量",所 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...

微信小程序自定义状态栏

微信小程序自定义状态栏相关推荐

最新文章

热门文章