静态修改导航栏标题及背景
通过配置页面 page.json参数实现:
页面配置参数
| 属性 | 类型 | 默认值 | 描述 |
| navigationBarBackgroundColor | HexColor | 000000 | 导航栏背景颜色, 如 #000000 |
| navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black / white |
| navigationBarTitleText | String | | 导航栏标题文字内容 |
| backgroundColor | HexColor | ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新。详见 Page.onPullDownRefresh |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px。详见 Page.onReachButom |
| disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项 |
页面配置
{ "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色 "navigationBarTextStyle": "black", //导航栏标题颜色(包括文本以及导航栏图标) "navigationBarTitleText": "标题名称", //导航栏标题 "backgroundColor": "#eeeeee", //窗口的背景色(下拉可以看见) "backgroundTextStyle": "light" //下拉 loading 的样式,仅支持 dark / light}
动态修改导航栏标题及背景
页面标题(wx.setNavigationBarTitle(object))
wx.setNavigationBarTitle({ title: '标题名称'});
| 参数 | 类型 | 必填 | 说明 |
| title | String | 是 | 页面标题 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
页面标题(wx.setNavigationBarColor(object))
wx.setNavigationBarColor({ frontColor: '#000000', backgroundColor: '#ffffff'})
| 参数名 | 类型 | 必填 | 说明 |
| frontColor | String | 是 | 前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000 |
| backgroundColor | String | 是 | 背景颜色值,有效值为十六进制颜色 |
| animation | Object | 否 | 动画效果 |
| animation.duration | Number | 否 | 动画变化时间,默认0,单位:毫秒 |
| animation.timingFunc | String | 否 | 动画变化方式,默认 linear |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
animation.timingFunc 有效值:
| 值 | 说明 |
| linear | 动画从头到尾的速度是相同的。 |
| easeIn | 动画以低速开始 |
| easeOut | 动画以低速结束。 |
| easeInOut | 动画以低速开始和结束。 |