关于小程序导航顶部配置都写在.json文件中。
相关属性及属性值
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如"#000000" | |
| navigationBarTextStyle | String | 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 |
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" }
当我们设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。如果要设置页面背景颜色，得在 wxss 中自定义样式，如下：
page { background-color: #cccccc;}效果图
