百度智能小程序自定義頂部導(dǎo)航欄應(yīng)該如何配置

3124次閱讀

頂部導(dǎo)航欄

頂部導(dǎo)航欄始終固定在屏幕頂部,不隨頁(yè)面滾動(dòng)隱藏。
智能小程序會(huì)自動(dòng)繼承小程序首頁(yè)頂部導(dǎo)航欄的配置,但每個(gè)頁(yè)面均可配置其頂部導(dǎo)航欄。即同一智能小程序中,不但可同時(shí)存在原生頂部導(dǎo)航欄和自定義導(dǎo)航欄,也可為每個(gè)頁(yè)面定制不同的樣式。


自定義頂部導(dǎo)航欄

百度App v11.1及以上版本的智能小程序,支持自定義頂部導(dǎo)航欄,使其只保留框架控制功能區(qū)。

使用自定義導(dǎo)航欄前,請(qǐng)了解透明框架的頁(yè)面布局基礎(chǔ),此時(shí)原生頂部導(dǎo)航欄中的容器、框架內(nèi)部導(dǎo)航功能區(qū)、頁(yè)面標(biāo)題均不展示,開發(fā)者可自定義當(dāng)前頁(yè)面的頂部導(dǎo)航欄。

我們建議,在使用自定義導(dǎo)航欄時(shí),通過(guò)系統(tǒng)信息接口getSystemInfoSync獲得系統(tǒng)狀態(tài)欄的高度(statusBarHeight),并為系統(tǒng)狀態(tài)欄配置與自定義導(dǎo)航欄背景一致的顏色。


正確

普通手機(jī)(1)及全面屏手機(jī)(2)系統(tǒng)狀態(tài)欄均正確適配,且顏色與自定義頂部導(dǎo)航欄一致。

7.png


錯(cuò)誤

適配系統(tǒng)狀態(tài)欄高度,但未正確配置顏色。

8-1.png


錯(cuò)誤

未適配系統(tǒng)狀態(tài)欄高度,導(dǎo)致自定義頂部導(dǎo)航欄布局錯(cuò)位。

8-2.png

自定義導(dǎo)航欄的元素建議與控制功能區(qū)對(duì)齊,且與原生頂部導(dǎo)航欄高度一致(iOS為44pt,Android為38pt)。

正確

自定義頂部導(dǎo)航欄元素與控制功能區(qū)垂直居中對(duì)齊

9-1.png


錯(cuò)誤

自定義頂部導(dǎo)航欄元素未對(duì)齊

9-2.png


閱讀本文的人還可以閱讀:

百度智能小程序入口有哪些?哪里可以進(jìn)入百度智能小程序?

百度智能小程序開源聯(lián)盟是什么

百度智能小程序的流量為什么那么高,小程序如何引流?

怎樣做好百度智能小程序體驗(yàn)設(shè)計(jì)(1)

本文由夫唯SEO特訓(xùn)營(yíng)編輯整理。

搜外專注SEO培訓(xùn)和SEO周邊Saas服務(wù)解決方案,10年來(lái)超過(guò)五萬(wàn)學(xué)員在此獲得技術(shù)提升和人脈圈子。

SEO課程包含移動(dòng)搜索、零基礎(chǔ)建站、群站SEO思維、搜外6系統(tǒng)、SEM入門等。

192期A班報(bào)名時(shí)間7月1日-7月15日,請(qǐng)?zhí)砑诱猩头∧⑿牛簊eowhy2021。 微信掃碼添加客服人員

我們的目標(biāo)是:讓非技術(shù)人員輕松學(xué)會(huì)互聯(lián)網(wǎng)技術(shù)。

  • 搜外會(huì)員SEO交流群(免費(fèi))

    微信掃碼添加客服人員
  • 小程序運(yùn)營(yíng)交流群(免費(fèi))

    微信掃碼添加客服人員
  • 搜外會(huì)員SEM競(jìng)價(jià)交流群(免費(fèi))

    微信掃碼添加客服人員
  • 夫唯學(xué)員SEO交流群(VIP)

    微信掃碼添加客服人員

掃碼獲取資源

微信掃碼添加客服人員
  • SEO技術(shù)實(shí)戰(zhàn)微信群

    微信掃碼添加客服人員
  • 大站流量總監(jiān)群(審核身份)

    微信掃碼添加客服人員
  • Google獨(dú)立站英文SEO群

    微信掃碼添加客服人員
  • SEO團(tuán)隊(duì)KPI管理表格

    微信掃碼添加客服人員
  • 工業(yè)品網(wǎng)站友情鏈接群

    微信掃碼添加客服人員
  • 本地生活服務(wù)業(yè)友鏈群

    微信掃碼添加客服人員

跟夫唯老師系統(tǒng)學(xué)習(xí)群站SEO
成為互聯(lián)網(wǎng)運(yùn)營(yíng)推廣大咖

掌握SEO技巧、建站前端、群站霸屏、SEM入門、新聞源推廣……
Processed in 0.139029 Second , 41 querys.