百度智能小程序自定义顶部导航栏应该如何配置

2877次阅读

顶部导航栏

顶部导航栏始终固定在屏幕顶部,不随页面滚动隐藏。
智能小程序会自动继承小程序首页顶部导航栏的配置,但每个页面均可配置其顶部导航栏。即同一智能小程序中,不但可同时存在原生顶部导航栏和自定义导航栏,也可为每个页面定制不同的样式。


自定义顶部导航栏

百度App v11.1及以上版本的智能小程序,支持自定义顶部导航栏,使其只保留框架控制功能区。

使用自定义导航栏前,请了解透明框架的页面布局基础,此时原生顶部导航栏中的容器、框架内部导航功能区、页面标题均不展示,开发者可自定义当前页面的顶部导航栏。

我们建议,在使用自定义导航栏时,通过系统信息接口getSystemInfoSync获得系统状态栏的高度(statusBarHeight),并为系统状态栏配置与自定义导航栏背景一致的颜色。


正确

普通手机(1)及全面屏手机(2)系统状态栏均正确适配,且颜色与自定义顶部导航栏一致。

7.png


错误

适配系统状态栏高度,但未正确配置颜色。

8-1.png


错误

未适配系统状态栏高度,导致自定义顶部导航栏布局错位。

8-2.png

自定义导航栏的元素建议与控制功能区对齐,且与原生顶部导航栏高度一致(iOS为44pt,Android为38pt)。

正确

自定义顶部导航栏元素与控制功能区垂直居中对齐

9-1.png


错误

自定义顶部导航栏元素未对齐

9-2.png


阅读本文的人还可以阅读:

百度智能小程序入口有哪些?哪里可以进入百度智能小程序?

百度智能小程序开源联盟是什么

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

怎样做好百度智能小程序体验设计(1)

本文由夫唯SEO特训营编辑整理,最后修订时间:2019-01-16

搜外专注SEO培训和SEO周边Saas服务解决方案,10年来超过五万学员在此获得技术提升和人脉圈子。

SEO课程包含移动搜索、零基础建站、群站SEO思维、搜外6系统、SEM入门等。

6月01日167期A班开始招生,报名课程,请添加招生客服小沫微信:seowhy2021。 微信扫码添加客服人员

我们的目标是:让非技术人员轻松学会互联网技术。

  • 搜外会员SEO交流群(免费)

    微信扫码添加客服人员
  • 小程序运营交流群(免费)

    微信扫码添加客服人员
  • 搜外会员SEM竞价交流群(免费)

    微信扫码添加客服人员
  • 夫唯学员SEO交流群(VIP)

    微信扫码添加客服人员

跟夫唯老师系统学习群站SEO
成为互联网运营推广大咖

掌握SEO技巧、建站前端、群站霸屏、SEM入门、新闻源推广……
Processed in 0.174586 Second , 54 querys.