微信小程序自定义顶部导航栏(适配所有机型)

在微信小程序中,自定义导航栏的颜色 可以在app.json.  window里面添加navigationBarBackgroundColor属性。

但是颜色只能为十六进制颜色码,不能使用rgb,或者rgba.。

为了满足更多用户的需求,微信官方给出了一个navigationStyle属性。

官方文档:navigationStyle 导航栏样式,仅支持 default/custom。custom  模式可自定义导航栏,只保留右上角胶囊状的按钮)。

在app.json window 增加 navigationStyle:custom ,顶部导航栏就会消失,保留右上角胶囊状的按钮。

Q:如果改变胶囊体颜色?

A:胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

注:如果自定义导航栏,页面自带的返回按钮也会消失,需要用代码编写!!!!(navigator 组件 open-type: navigateBack)

Q:如何兼容适配所有机型,包括刘海屏?

A:使用 wx.getSystemInfoSync()['statusBarHeight'] 则能获取到顶部状态栏的高度,单位为px.

简单示例:

在app.js里面
App({
globalData: {
statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
}
})

或者是获取系统信息后进行识别

// 获取系统状态栏信息
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
this.globalData.CustomBar = e.platform == 'android' ? e.statusBarHeight + 50 : e.statusBarHeight + 45;
}
});
},
WXML 自定义顶部状态栏div结构
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
<text>demo</text>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>
app.css 全局css中设置样式
.custom{
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 45px;
background: #2C5CFF;
z-index: 999;
}
.custom text{
color: #fff;
font-size: 34rpx;
font-weight: 500;
max-width: 280rpx;
}
.empty_custom{
height: 45px;
width: 100%;
}
在index.js中取出statusBarHeight值
Page({
data:{
statusBarHeight: app.globalData.statusBarHeight
}
})

[文章转自网络,留着参考学习]

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

相关推荐

小米ax3600官方固件安装adguardhome

小米ax3600路由器開啟SSH權限後就可以安裝插件了,目前使用最多的莫過於于shellclash+adguardhome,第一個shellclash安裝過於簡單,就一行代碼的事情,這裡就不過多贅述。adguardhome是一款非常好用的去廣告程序 ...

小米路由器AX3600 解锁SSH

小米AIoT路由器AX3600,是一台标准的Wi-Fi 6路由,采用高通第二代Wi-Fi 6方案,更加成熟。全套高通芯片,2.4GHz频段支持2T2R ,5GHz频段支持4T4R,二者共可提供高达3000Mbps的无线速率,而小米又分别为两个频段 ...

非华为电脑使用华为多屏协同功能教程

不得不说华为的多屏协同功能非常的好用,安装了华为电脑管家的华为笔记本,手机内容可以无缝协同到电脑屏幕上进行操作。因而很多技术大佬就想方设法破解华为电脑管家的原生限制,让它可以安装到其他电脑上实现多 ...

CentOS从8.0版本升级到8.1版本

CentOS社区已经正式发布了CentOS 8.1.1911(Py3.6.8),和此前8.0版本相隔四个月时间。對於目前已經是 CentOS 8 (1905)版本的系統,升級到CentOS 8.1.1911(Py3.6.8)就相對比較簡單了。 但是實際在 CentOS 8 (1905) ...