微信小程序自定义导航栏标题和背景

静态修改导航栏标题及背景

---

通过配置页面 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	动画以低速开始和结束。