小程序?qū)崿F(xiàn)自定義導航欄適配完美版

發(fā)布時間：2020-09-30 15:39:26 來源：腳本之家閱讀：199 作者：小灰oO 欄目：web開發(fā)

1、發(fā)現(xiàn)問題

小程序頁面自定義導航欄功能已經(jīng)開放有些日子了(還不知道這個功能的可以先>>了解一下)，這極大的提升了小程序開發(fā)的自由度，相信不少小伙伴已經(jīng)使用過這個功能，同時也相信不少小伙伴在此功能開發(fā)過程中踩過同樣的一些坑：

機型多如牛毛：自定義導航欄高度在不同機型始終無法達到視覺上的統(tǒng)一；
調(diào)皮的膠囊按鈕：導航欄元素（文字，圖標等）怎么也對不齊那該死的膠囊按鈕；
各種尺寸的全面屏，奇怪的劉海屏，簡直要抓狂。

同樣的，這些問題也是小灰經(jīng)歷過的。但是小灰相信，辦法總比問題多，于是開始了自己的探究：

2、一探究竟

為了搞明白到底該怎么去適配，老規(guī)矩，我先翻了一波官方文檔，還別說，官方還真有這么一段介紹了相關(guān)細節(jié)，>>詳情點擊：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

從圖中分析，我們可以得到如下信息：

Android跟iOS有差異，表現(xiàn)在頂部到膠囊按鈕之間的距離差了6pt
膠囊按鈕高度為32pt， iOS和Android一致

這。。。，好像并沒有什么L用啊？？這僅僅是普通屏幕為參照的，ipx，安卓全面屏完全沒介紹。
沉著冷靜，我們接著分析：

膠囊按鈕到狀態(tài)欄下邊緣這塊距離，好像是固定的？
安卓這個圖，好像有點奇怪？導航欄分為狀態(tài)欄+標題欄？
如果車兩個條件成立，那我們的問題是不是就解決了80%了？

那么我們來論證一下：

第一個問題：膠囊按鈕到狀態(tài)欄下邊緣的距離是不是固定的？

很簡單，我們寫一個狀態(tài)欄，通過wx.getSystemInfoSync().statusBarHeight設(shè)置高度

為了好測量，我們設(shè)置狀態(tài)欄背景色為深色

js代碼：

var sysinfo = wx.getSystemInfoSync();
this.setData({ 
 statusBarHeight:sysinfo.statusBarHeight 
})

wxml代碼：

<view class="status-bar" ></view>

wxss代碼：

.status-bar{
 background: rgb(141, 71, 71);
 }

效果圖（iPhone6）：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

效果圖（iPhoneX）：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

效果圖（安卓）：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

是不是有點眉目了？是的，從截圖可以看出，iOS是一致的，但是Android好像有所差別。

那究竟距離是多少？我們用神器（微信截圖）來量一量：

Android：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

iOS：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

可以看出，iOS膠囊按鈕與狀態(tài)欄之間距離為：6px， Android為8px，并且經(jīng)過測量，iOS各機型，Android各機型結(jié)果一致（由于篇幅原因，就不一一展示截圖了，有興趣的可以自行測量）

第二個問題：導航欄分為狀態(tài)欄+標題欄？

通過對第一個問題的論證，很明顯能看出來確實是這樣的。并且通過第一個問題的測量結(jié)果以及官方提供的數(shù)據(jù)，我們可以對標題欄高度進行計算：

導航欄高度 = 膠囊按鈕高度 + 狀態(tài)欄到膠囊按鈕間距 * 2
Android導航欄高度 = 32px + 8px * 2 = 48px
iOS導航欄高度 = 32px + 6px * 2 = 44px

*注：由于膠囊按鈕是原生組件，為表現(xiàn)一直，其單位在個系統(tǒng)都為px，所以我們的自定義導航欄各個高度的單位都必需是px（切記不能用rpx），才能完美適配。

3、解決問題

通過上述分析，相信小伙伴們都能有一個解決問題的思路了，在上代碼之前，小灰再給大家畫一下重點：

寫自定義導航組件的時候，需要將組件結(jié)構(gòu)一分為二：狀態(tài)欄 + 標題欄
狀態(tài)欄高度可通過wx.getSystemInfoSync().statusBarHeight獲取
標題欄高度：安卓：48px，iOS：44px
單位必需跟膠囊按鈕一致，用px

話不多說，上代碼(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: '導航欄' 
 }, 
 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)信息計算導航欄高度 
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：

<view class='nav' style='height: {{status + navHeight}}px'> 
 <view class='status' style='height: {{status}}px;{{containerStyle}}'></view>    <view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'> <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>   <image src='{{backIcon}}'></image> 
  </view> 
 <view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>  
 <image src='{{homeIcon}}'></image> 
 </view> [鏈接描述][10]
 <view class='nav-icon' wx:if="{{titleImg}}">  
 <image src='{{titleImg}}' style='{{iconStyle}}'></image> 
 </view>
  <view class='nav-title' wx:if="{{titleText && !titleImg}}">
  <text style='{{textStyle}}'>{{titleText}}</text>
  </view>
 </view>
 </view>

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;
}

運行效果圖：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

文字標題：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

圖片標題：

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

4、總結(jié)

經(jīng)過小灰的一番論證以及實踐經(jīng)驗，最終總結(jié)出以上最終解決方案，但希望對小伙伴們有所幫助，如果小伙伴們覺得有用，記得給顆star哦 --> 點我，后續(xù)還會更新其他組件。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

小程序?qū)崿F(xiàn)自定義導航欄適配完美版

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽