前言

微信小程序憑借著“不占內存，即用即走”等特點，加上微信的社交的屬性，其用戶量一路保持快速的增長。對其的應用要求也日漸增高，使用更多樣化、個性化。其中，對頂部導航的自定義實現，因交互功能成了一個普遍需要實現的組件，而尤因其不同設備下樣式的兼容問題 如何更優雅的實現 使其成為大家討論的熱點。

下面我們從對其的設計、實現、使用上進行詳細闡述，讓大家更加了解這個組件。原創文章，若有寫的不妥之處，歡迎大家指出更正。

自定義導航的設計

界面設計

目前，大多小程序對自定義導航的設計是：標題居中；左側膠囊包裹返回上一頁按鈕和到首頁按鈕，要和右側系統默認膠囊樣式布局一致。效果如下：

功能設計

主要功能如下：

1. 自定義 小程序 頂部導航 ：微信版本號 <7 的無此功能
2. 去首頁 功能 ：首頁沒有此功能
3. 返回 功能：無上一頁沒有此功能
4. 模擬系統默認樣式：和系統默認右邊膠囊樣式保持一致
5. 居中顯示標題：字數過多時 省略號代替

詳細實現

布局樣式實現

這個組件的實現的主要的重點在于不同設備上的樣式兼容。由于右側膠囊在不同設備下的表現是不一樣的，所以左側膠囊的布局樣式要隨不同設備進行自適應，既左側膠囊的高度間距等樣式數據要先計算出來再賦予其值。故難點就在于如何獲得這些值。經過一番針對個別手機的兼容踩坑操作（此處省略一萬字...