您的位置:首页 > 移动开发 > 微信开发

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

2018-09-06 11:40 603 查看

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

通过配置页面 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 动画以低速开始和结束。
阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: