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

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


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

你可能感兴趣的:(微信小程序)