1、發(fā)現(xiàn)問題
威信網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,威信網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為威信近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的威信做網(wǎng)站的公司定做！
小程序頁面自定義導(dǎo)航欄功能已經(jīng)開放有些日子了(還不知道這個(gè)功能的可以先>>了解一下)，這極大的提升了小程序開發(fā)的自由度，相信不少小伙伴已經(jīng)使用過這個(gè)功能，同時(shí)也相信不少小伙伴在此功能開發(fā)過程中踩過同樣的一些坑：
同樣的，這些問題也是小灰經(jīng)歷過的。但是小灰相信，辦法總比問題多，于是開始了自己的探究：
2、一探究竟
為了搞明白到底該怎么去適配，老規(guī)矩，我先翻了一波官方文檔，還別說，官方還真有這么一段介紹了相關(guān)細(xì)節(jié)，>>詳情點(diǎn)擊：
從圖中分析，我們可以得到如下信息：
這。。。，好像并沒有什么L用啊？？這僅僅是普通屏幕為參照的，ipx， 安卓全面屏完全沒介紹。
沉著冷靜，我們接著分析：
那么我們來論證一下：
第一個(gè)問題：膠囊按鈕到狀態(tài)欄下邊緣的距離是不是固定的？
很簡單，我們寫一個(gè)狀態(tài)欄，通過wx.getSystemInfoSync().statusBarHeight設(shè)置高度
為了好測量，我們?cè)O(shè)置狀態(tài)欄背景色為深色
js代碼：
重慶分公司
重慶分公司
var sysinfo = wx.getSystemInfoSync();
this.setData({
statusBarHeight:sysinfo.statusBarHeight
})wxml代碼：
wxss代碼：
.status-bar{
background: rgb(141, 71, 71);
}效果圖（iPhone6）：
效果圖（iPhoneX）：
效果圖（安卓）：
是不是有點(diǎn)眉目了？是的，從截圖可以看出，iOS是一致的，但是Android好像有所差別。
那究竟距離是多少？我們用神器（微信截圖）來量一量：
Android：
iOS：
可以看出，iOS膠囊按鈕與狀態(tài)欄之間距離為：6px， Android為8px，并且經(jīng)過測量，iOS各機(jī)型，Android各機(jī)型結(jié)果一致（由于篇幅原因，就不一一展示截圖了，有興趣的可以自行測量）
第二個(gè)問題：導(dǎo)航欄分為 狀態(tài)欄+標(biāo)題欄？
通過對(duì)第一個(gè)問題的論證，很明顯能看出來確實(shí)是這樣的。并且通過第一個(gè)問題的測量結(jié)果以及官方提供的數(shù)據(jù)，我們可以對(duì)標(biāo)題欄高度進(jìn)行計(jì)算：
*注：由于膠囊按鈕是原生組件，為表現(xiàn)一直，其單位在個(gè)系統(tǒng)都為px，所以我們的自定義導(dǎo)航欄各個(gè)高度的單位都必需是px（切記不能用rpx），才能完美適配。
3、解決問題
通過上述分析，相信小伙伴們都能有一個(gè)解決問題的思路了，在上代碼之前，小灰再給大家畫一下重點(diǎn)：
話不多說，上代碼(gitHub地址)：
js：
Component({
properties: {
background: {
type: String,
value: 'rgba(255, 255, 255, 1)'
},
color: {
type: String,
value: 'rgba(0, 0, 0, 1)'
},
titleText: {
type: String,
value: '導(dǎo)航欄'
},
titleImg: {
type: String,
value: ''
},
backIcon: {
type: String,
value: ''
},
homeIcon: {
type: String,
value: ''
},
fontSize: {
type: Number,
value: 16
},
iconHeight: {
type: Number,
value: 19
},
iconWidth: {
type:Number,
value: 58
}
},
attached: function(){
var that = this;
that.setNavSize();
that.setStyle();
},
data: {
},
methods: {
// 通過獲取系統(tǒng)信息計(jì)算導(dǎo)航欄高度
setNavSize: function() {
var that = this
, sysinfo = wx.getSystemInfoSync()
, statusHeight = sysinfo.statusBarHeight
, isiOS = sysinfo.system.indexOf('iOS') > -1
, navHeight;
if (!isiOS) {
navHeight = 48;
} else {
navHeight = 44;
}
that.setData({
status: statusHeight,
navHeight: navHeight
})
},
setStyle: function() {
var that = this
, containerStyle
, textStyle
, iconStyle;
containerStyle = [
'background:' + that.data.background
].join(';');
textStyle = [
'color:' + that.data.color,
'font-size:' + that.data.fontSize + 'px'
].join(';');
iconStyle = [
'width: ' + that.data.iconWidth + 'px',
'height: ' + that.data.iconHeight + 'px'
].join(';');
that.setData({
containerStyle: containerStyle,
textStyle: textStyle,
iconStyle: iconStyle
}) },
// 返回事件
back: function(){
wx.navigateBack({
delta: 1
})
this.triggerEvent('back', {back: 1})
},
home: function() {
this.triggerEvent('home', {});
}
}})wxml：
[鏈接描述][10] {{titleText}}
wxss：
.navbar{
position: relative
}
.back-icon, .home-icon{
width: 28px;
height: 100%;
position: absolute;
transform: translateY(-50%);
top: 50%;
display: flex;
}
.back-icon{
left: 16px;
}
.home-icon{
left: 44px
}
.back-icon image{
width: 28px;
height: 28px;
margin: auto;
}
.home-icon image{
width: 20px;
height: 20px;
margin: auto;
}
.nav-title, .nav-icon{
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
font-size: 0;
font-weight: bold;
}運(yùn)行效果圖：
文字標(biāo)題：
圖片標(biāo)題：
4、總結(jié)
經(jīng)過小灰的一番論證以及實(shí)踐經(jīng)驗(yàn)，最終總結(jié)出以上最終解決方案，但希望對(duì)小伙伴們有所幫助，如果小伙伴們覺得有用，記得給顆star哦 --> 點(diǎn)我，后續(xù)還會(huì)更新其他組件。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
