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

340次阅读

顶部导航栏

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


自定义顶部导航栏

百度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培训  修订1.0  2019-01-15

搜外专注SEO在线系统培训,10年来超过五万学员在此获得技术提升和人脉圈子。

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

欢迎添加助教微信:seowhy2018,马上获得优秀学员案例。