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

牧野網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

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

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

2、一探究竟

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

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

• 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 
})

本文名稱：小程序?qū)崿F(xiàn)自定義導航欄適配完美版-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://chinadenli.net/article16/desdgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、網(wǎng)站改版、商城網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站制作、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)