小程序的状态栏、导航条、标题、窗口背景色的设置

关于小程序导航顶部配置都写在.json文件中。

相关属性及属性值

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white black/white\color{red}{导航栏标题颜色,仅支持 black/white}导航栏标题颜色,仅支持black/white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮 微信版本 6.6.0
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance Number 50

\color{red}{注意:}注意:
1.HexColor(十六进制颜色值),如"#ff00ff"
2.关于navigationStyle

  • 客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。
  • 客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效
  • 开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉

3.关于navigationBarTextStyle

导航栏标题颜色仅支持black/white

代码展示

在app.json中写如下代码:

"window": {
    "backgroundTextStyle": "light",
    "backgroundColor":"#cccccc",
    "navigationBarBackgroundColor": "#ff9700",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "white"
  }

\color{red}{注意:}注意:
当我们设置 backgroundColor 时,实际在电脑的模拟器中根本看不到效果。这是因为 backgroundColor 指的窗体背景颜色,而不是页面的背景颜色,即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的,所以会让人误以为这个配置是无效的。如果要设置页面背景颜色,得在 wxss 中自定义样式,如下:

page {
    background-color: #cccccc;
}

效果图

小程序的状态栏、导航条、标题、窗口背景色的设置
上一篇:Jquery的window.onload实现


下一篇:Andorid-初识