国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小程序自定義導(dǎo)航欄（適配所有手機(jī)）

Yu_Huang / 2172人閱讀

摘要：背景在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題手機(jī)對于頁面的展示不一致，安卓的顯示不居中頁面的只支持純文本級別的樣式控制，不能夠做更豐富的效果左上角的事件無法監(jiān)聽定制路由導(dǎo)航單一，只能夠返回上一頁，深層級頁面的返回不夠友好探索小程序

背景

在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題：

Android、IOS手機(jī)對于頁面title的展示不一致，安卓title的顯示不居中

頁面的title只支持純文本級別的樣式控制，不能夠做更豐富的title效果

左上角的事件無法監(jiān)聽、定制

路由導(dǎo)航單一，只能夠返回上一頁，深層級頁面的返回不夠友好

探索

小程序自定義導(dǎo)航欄已開放許久>>了解一下，相信不少小伙伴已使用過這個(gè)功能，同時(shí)不少小伙伴也會發(fā)現(xiàn)一些坑：

機(jī)型多如牛毛：自定義導(dǎo)航欄高度在不同機(jī)型始終無法達(dá)到視覺上的統(tǒng)一

調(diào)皮的膠囊按鈕：導(dǎo)航欄元素（文字，圖標(biāo)等）怎么也對不齊那該死的膠囊按鈕

各種尺寸的全面屏，奇怪的劉海屏，簡直要抓狂

一探究竟

為了搞明白原理，我先去翻了官方文檔，>>飛機(jī)，點(diǎn)過去是不是很驚喜，很意外，通篇大文盡然只有最下方的一張圖片與這個(gè)問題有關(guān)，并且啥也看不清，汗汗汗...

我特意找了一張圖片來

分析上圖，我得到如下信息：

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

膠囊按鈕高度為32pt， iOS和Android一致

動手分析

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

Android：

iOS:

可以看出，iOS膠囊按鈕與狀態(tài)欄之間距離為：4px， Android為8px，是不是所有手機(jī)都是這種情況呢？
答案是:蘋果手機(jī)確實(shí)都是4px,安卓大部分都是7和8 也會有其他的情況(可以自己打印getSystemInfo驗(yàn)證)如何快速便捷算出這個(gè)高度,請接著往下看
如何計(jì)算

導(dǎo)航欄分為狀態(tài)欄和標(biāo)題欄,只要能算出每臺手機(jī)的導(dǎo)航欄高度問題就迎刃而解

導(dǎo)航欄高度 = 膠囊按鈕高度 + 狀態(tài)欄到膠囊按鈕間距 * 2 + 狀態(tài)欄高度

注：由于膠囊按鈕是原生組件，為表現(xiàn)一致，其單位在各種手機(jī)中都為px，所以我們自定義導(dǎo)航欄的單位都必需是px（切記不能用rpx），才能完美適配。
解決問題

現(xiàn)在我們明白了原理，可以利用膠囊按鈕的位置信息和statusBarHeight高度動態(tài)計(jì)算導(dǎo)航欄的高度，貼一個(gè)實(shí)現(xiàn)此功能最重要的方法

let systemInfo = wx.getSystemInfoSync();
let rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null; //膠囊按鈕位置信息
    Taro.getMenuButtonBoundingClientRect();
    let navBarHeight = (function() { //導(dǎo)航欄高度
            let gap = rect.top - systemInfo.statusBarHeight; //動態(tài)計(jì)算每臺手機(jī)狀態(tài)欄到膠囊按鈕間距
            return 2 * gap + rect.height;
          })();

gap信息就是不同的手機(jī)其狀態(tài)欄到膠囊按鈕間距，具體更多代碼實(shí)現(xiàn)和使用demo請移步下方代碼倉庫，代碼中還會有輸入框文字跳動解決辦法,安卓手機(jī)輸入框文字飛出解決辦法,左側(cè)按鈕邊框太粗解決辦法等等

吐槽

這么重要的問題，官方盡然沒有提供解決方案...竟然提供了一張看不清的圖片???

網(wǎng)上有很多ios設(shè)置44，android設(shè)置48，還有根據(jù)不同的手機(jī)型號設(shè)置不同高度，通過長時(shí)間的開發(fā)和嘗試，本人發(fā)現(xiàn)以上方案并不完美,并且bug很多
代碼庫

Taro組件gitHub地址詳細(xì)用法請參考README

原生組件npm構(gòu)建版本gitHub地址詳細(xì)用法請參考README

原生組件簡易版gitHub地址詳細(xì)用法請參考README

由于本人精力有限，目前只計(jì)劃發(fā)布維護(hù)好這2種組件，其他組件請自行修改代碼，有問題請聯(lián)系

備注

上方2種組件在最下方30多款手機(jī)測試情況表現(xiàn)良好

iPhone手機(jī)打電話和開熱點(diǎn)導(dǎo)致導(dǎo)航欄樣式錯(cuò)亂，問題已經(jīng)解決啦，請去demo里測試，這里特別感謝moments網(wǎng)友提出的問題

本文章并無任何商業(yè)性質(zhì)，如有侵權(quán)請聯(lián)系本人修改或刪除

文章少量部分內(nèi)容是本人查詢搜集而來

如有問題可以下方留言討論，微信zhijunxh

比較

斗魚:

虎牙:

微博:

酷狗:

知乎:

知乎是這里邊做的最好的，但是我個(gè)人認(rèn)為有幾個(gè)可以優(yōu)化的小問題

打電話或者開啟熱點(diǎn)導(dǎo)致樣式錯(cuò)落，這也是大部門小程序的問題

導(dǎo)航欄下邊距太小，看起來不舒服

搜索框距離2側(cè)按鈕組距離不對等

自定義返回和home按鈕中的豎線顏色重了，并且感覺太粗

如果您看到了此篇文章，請趕快修改自己的代碼，并運(yùn)用在實(shí)踐中吧

掃碼體驗(yàn)我的小程序:

創(chuàng)作不易，如果對你有幫助，請移步Taro組件gitHub原生組件gitHub給個(gè)星星 star?? 謝謝
測試信息
手機(jī)型號 膠囊位置信息 statusBarHeight 測試情況
iPhoneX 80 32 281 369 48 88 44 通過
iPhone8 plus 56 32 320 408 24 88 20 通過
iphone7 56 32 281 368 24 87 20 通過
iPhone6 plus 56 32 320 408 24 88 20 通過
iPhone6 56 32 281 368 24 87 20 通過
HUAWEI SLA-AL00 64 32 254 350 32 96 24 通過
HUAWEI VTR-AL00 64 32 254 350 32 96 24 通過
HUAWEI EVA-AL00 64 32 254 350 32 96 24 通過
HUAWEI EML-AL00 68 32 254 350 36 96 29 通過
HUAWEI VOG-AL00 65 32 254 350 33 96 25 通過
HUAWEI ATU-TL10 64 32 254 350 32 96 24 通過
HUAWEI SMARTISAN OS105 64 32 326 422 32 96 24 通過
XIAOMI MI6 59 28 265 352 31 87 23 通過
XIAOMI MI4LTE 60 32 254 350 28 96 20 通過
XIAOMI MIX3 74 32 287 383 42 96 35 通過
REDMI NOTE3 64 32 254 350 32 96 24 通過
REDMI NOTE4 64 32 254 350 32 96 24 通過
REDMI NOTE3 55 28 255 351 27 96 20 通過
REDMI 5plus 67 32 287 383 35 96 28 通過
MEIZU M571C 65 32 254 350 33 96 25 通過
MEIZU M6 NOTE 62 32 254 350 30 96 22 通過
MEIZU MX4 PRO 62 32 278 374 30 96 22 通過
OPPO A33 65 32 254 350 33 96 26 通過
OPPO R11 58 32 254 350 26 96 18 通過
VIVO Y55 64 32 254 350 32 96 24 通過
HONOR BLN-AL20 64 32 254 350 32 96 24 通過
HONOR NEM-AL10 59 28 265 352 31 87 24 通過
HONOR BND-AL10 64 32 254 350 32 96 24 通過
HONOR duk-al20 64 32 254 350 32 96 24 通過
SAMSUNG SM-G9550 64 32 305 401 32 96 24 通過
360 1801-A01 64 32 254 350 32 96 24 通過

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106816.html

相關(guān)文章

  • 小程序自定義導(dǎo)航欄（適配所有手機(jī)）

    摘要：背景在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題手機(jī)對于頁面的展示不一致，安卓的顯示不居中頁面的只支持純文本級別的樣式控制，不能夠做更豐富的效果左上角的事件無法監(jiān)聽定制路由導(dǎo)航單一，只能夠返回上一頁，深層級頁面的返回不夠友好探索小程序 背景 在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題： Android、IOS手機(jī)對于頁面title的展示不一致，安卓title的顯示不居中...

    jayzou 評論0 收藏0

  • Win10應(yīng)用設(shè)計(jì)的那些事兒

    摘要：如何挑選合適的導(dǎo)航結(jié)構(gòu)導(dǎo)航設(shè)計(jì)是應(yīng)用設(shè)計(jì)的關(guān)鍵，設(shè)計(jì)規(guī)范以下簡稱規(guī)范中將導(dǎo)航元素分為對等層次和歷史導(dǎo)航等幾類，例如表和透視表導(dǎo)航窗格是對等導(dǎo)航元素，中心大綱細(xì)節(jié)屬于分層導(dǎo)航元素，返回則屬于歷史導(dǎo)航元素。 此文已由作者楊凱明授權(quán)網(wǎng)易云社區(qū)發(fā)布。 歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營經(jīng)驗(yàn)。 繼Windows 10系統(tǒng)發(fā)布之后，很多Windows用戶更新了系統(tǒng)。win10系統(tǒng)的發(fā)布，...

    ad6623 評論0 收藏0

  • 移動前端 - 收藏集 - 掘金

    摘要：使用移動設(shè)備查看頁面時(shí)會發(fā)現(xiàn)，在微信瀏覽器中有頂部導(dǎo)航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時(shí)圖片也需要用單位。移動端實(shí)踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面 做過網(wǎng)頁開發(fā)的同學(xué)想必都遇到過這樣尷尬的排版問題：在主體內(nèi)容不足夠多或者未完全加載出來之前，就會導(dǎo)致出現(xiàn)（圖一）的這種情況，原因是因?yàn)?..

    Jochen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<