大多也是抄網(wǎng)上的寫(xiě)法茂契，自己改了改。 感謝前輩門慨绳。
很多時(shí)候掉冶，會(huì)自定義頂部組件真竖，或者是去掉左上角返回鍵，所有微信提供了自定義頂部狀態(tài)欄的方法厌小。下面是一個(gè)公用的組件恢共。 拿去直接用既可，里面做了適配璧亚， 如果基礎(chǔ)庫(kù)版本低于2.5不顯示自定義狀態(tài)欄讨韭。
注：如果頁(yè)面用的是100%布局的話，需要減去自定義導(dǎo)航欄的高度癣蟋，不然會(huì)出現(xiàn)全屏的滾動(dòng)條之類的問(wèn)題透硝。
和自帶的一樣， 我做的是疯搅，點(diǎn)擊左上角有確定返回提示濒生，可以隨意自定！
image.png
一：定義組件 我放的位置：component/navbar/index
1幔欧、在 app.js中獲取 手機(jī)的狀態(tài)欄高度以及字體大小罪治。wx.getSystemInfo（）
onLaunch: function () {
//獲取手機(jī)導(dǎo)航欄高度
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;
//設(shè)置低版本不顯示自定義導(dǎo)航欄
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: {
//自定義導(dǎo)航組件高度
navHeightHidden:false,
statusHeight:null,
navHeight:null,
fontSize:null,
}
2、使用 組件的 index.wxml
<!-- 如果版本低于2.5后礁蔗，不顯示自定義狀態(tài)欄 -->
<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中的手機(jī)狀態(tài)欄高度字體等浴井，以及左上角返回按鈕的事件晒骇，我的是彈窗提示要不要返回， 你們隨意
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: {
// 定義點(diǎn)擊左上角返回按鈕的函數(shù)
backClick() {
var me=this;
wx.showModal({
title: '提示',
content: '如有改動(dòng)磺浙，請(qǐng)確認(rèn)是否已點(diǎn)擊【保存】',
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屠缭、 在對(duì)應(yīng)頁(yè)面的json中開(kāi)啟自定義頂部狀態(tài)欄，且引入自定義的狀態(tài)欄組件崭参。 family.json
"navigationStyle": "custom",
"usingComponents": {
"nav-bar": "../../component/navbar/index"
}
2呵曹、在對(duì)應(yīng)頁(yè)面的js中寫(xiě)好定義的組件狀態(tài)和標(biāo)題名
//自定義頂部 參數(shù)直接能看懂
nvabarData: {
homeCapsule: false,
title: '戶特征',
fontColor: "white",
fontSize: '26rpx',
headerbg: '#04aceb',
hiddenBlock: false,
slot: false
},
// 整個(gè)導(dǎo)航欄高度
navHeight: app.globalData.navHeight + app.globalData.statusHeight,
// 是否顯示自定義導(dǎo)航欄（為低版本）
navHeightHidden: app.globalData.navHeightHidden,
3、在index 中使用自定義組件
<!-- 自定義頂部 -->
<nav-bar header='{{nvabarData}}'></nav-bar>
// 我的頁(yè)面用的是100% 高度的布局何暮， 所有要減去這個(gè)狀態(tài)欄的高度
<view class="container" style="height: calc( 100% - {{navHeightHidden?0:navHeight}}px );"></view>
