大多也是抄网上的写法，自己改了改。 感谢前辈门。
很多时候，会自定义顶部组件，或者是去掉左上角返回键，所有微信提供了自定义顶部状态栏的方法。下面是一个公用的组件。 拿去直接用既可，里面做了适配， 如果基础库版本低于2.5不显示自定义状态栏。
注：如果页面用的是100%布局的话，需要减去自定义导航栏的高度，不然会出现全屏的滚动条之类的问题。
和自带的一样， 我做的是，点击左上角有确定返回提示，可以随意自定！
image.png
一：定义组件 我放的位置：component/navbar/index
1、在 app.js中获取 手机的状态栏高度以及字体大小。wx.getSystemInfo（）
onLaunch: function () {
//获取手机导航栏高度
wx.getSystemInfo({
success: res => {
var isIos = res.system.indexOf('iOS') > -1;
this.globalData.statusHeight = res.statusBarHeight;
this.globalData.navHeight = isIos ? 44 : 48;
this.globalData.fontSize = res.fontSizeSetting;
//设置低版本不显示自定义导航栏
if (res.SDKVersion && res.SDKVersion.split('.')[0] * 1 <= 2 && res.SDKVersion.split('.')[1] * 1 < 5){
this.globalData.navHeightHidden=true;
}
},
fail(err) {
console.log(err);
}
})
}
globalData: {
//自定义导航组件高度
navHeightHidden:false,
statusHeight:null,
navHeight:null,
fontSize:null,
}
2、使用 组件的 index.wxml
<!-- 如果版本低于2.5后，不显示自定义状态栏 -->
<block wx:if="{{navHeightHidden}}">
<view></view>
</block>
<block wx:else>
<view style="height:{{statusHeight+navHeight}}px" hidden='{{header.hiddenBlock}}'></view>
<view class='topbar' style="background:{{header.headerbg}}">
<view class='status' style="height:{{statusHeight}}px"></view>
<view class='navbar' style="height:{{navHeight}}px">
<block wx:if="{{header.slot}}">
<slot></slot>
</block>
<block wx:else>
<view class='navbar_home' wx:if="{{header.homeCapsule}}" style="background:{{header.capsulebg}};border:{{header.capsuleborder}}">
<image src='../../images/black_back.png' bindtap='backClick' style="border-right:{{header.capsulesep}}"></image>
<image src='../../images/home_black.png' bindtap='homeClick'></image>
</view>
<view class='navbar_back' bindtap='backClick' wx:else>
<image src='../../images/black_back.png'></image>
</view>
<view class='navbar_title' style="height:{{navHeight}}px">
<view style="color:{{header.fontColor}};font-size:{{fontSize}}px">{{header.title}}</view>
</view>
</block>
</view>
</view>
</block>
3、组件的 index.wxss
.topbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.status {
width: 100%;
}
.navbar {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
}
.navbar_back {
padding: 0 20rpx;
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
}
.navbar_back image {
width: 23rpx;
height: 39rpx;
}
.navbar_title {
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.navbar_title view {
width: 40%;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 38rpx;
}
.navbar_home {
margin-left: 32rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 33rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(0,0,0,0.2);
box-sizing: border-box;
padding: 10rpx 0;
}
.navbar_home image:first-child {
width: 21rpx;
height: 34rpx;
padding: 0 32rpx;
border-right: 1px solid rgba(255,255,255,0.2);
}
.navbar_home image:last-child {
width: 37rpx;
height: 35rpx;
padding: 0 32rpx;
}
4、组件的js index.js 在里面获取到app.js中的手机状态栏高度字体等，以及左上角返回按钮的事件，我的是弹窗提示要不要返回， 你们随意
var app = getApp();
Component({
properties: {
header: {
type: Object,
value: {
homeCapsule: false,
headerbg: "#fff",
title: "",
fontColor: "#000",
fontSize: '16',
hiddenBlock: false,
capsulebg: 'rgba(0,0,0,0.2)',
capsuleborder: '1px solid rgba(0, 0, 0, 0.1)',
capsulesep: '1px solid rgba(255,255,255,0.2)',
slot: false
}
},
customBackReturn: {
type: Boolean,
value: false
}
},
data:{
statusHeight: app.globalData.statusHeight,
navHeight: app.globalData.navHeight,
fontSize: app.globalData.fontSize,
navHeightHidden: app.globalData.navHeightHidden
},
methods: {
// 定义点击左上角返回按钮的函数
backClick() {
var me=this;
wx.showModal({
title: '提示',
content: '如有改动，请确认是否已点击【保存】',
success(res) {
if (res.confirm) {
if (me.data.customBackReturn) {
me.triggerEvent("customBackReturn")
} else {
if (getCurrentPages().length == 1) {
wx.switchTab({
url: '/pages/index/index',
})
} else {
wx.navigateBack({
delta: 1
})
}
}
} else if (res.cancel) {
}
}
})
},
homeClick() {
wx.switchTab({
url: '/pages/index/index',
})
}
},
attached() {
var app = getApp();
this.setData({
statusHeight: app.globalData.statusHeight,
navHeight: app.globalData.navHeight,
fontSize: app.globalData.fontSize,
navHeightHidden: app.globalData.navHeightHidden
})
}
})
5、组件的json index.json
{
"component": true
}
二：使用组件， 如 family中使用
1、 在对应页面的json中开启自定义顶部状态栏，且引入自定义的状态栏组件。 family.json
"navigationStyle": "custom",
"usingComponents": {
"nav-bar": "../../component/navbar/index"
}
2、在对应页面的js中写好定义的组件状态和标题名
//自定义顶部 参数直接能看懂
nvabarData: {
homeCapsule: false,
title: '户特征',
fontColor: "white",
fontSize: '26rpx',
headerbg: '#04aceb',
hiddenBlock: false,
slot: false
},
// 整个导航栏高度
navHeight: app.globalData.navHeight + app.globalData.statusHeight,
// 是否显示自定义导航栏（为低版本）
navHeightHidden: app.globalData.navHeightHidden,
3、在index 中使用自定义组件
<!-- 自定义顶部 -->
<nav-bar header='{{nvabarData}}'></nav-bar>
// 我的页面用的是100% 高度的布局， 所有要减去这个状态栏的高度
<view class="container" style="height: calc( 100% - {{navHeightHidden?0:navHeight}}px );"></view>
