微信小程序自定义导航栏标题和背景
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({ 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 | 动画以低速开始和结束。 |
相关文章推荐
- 微信小程序 配置顶部导航条标题颜色的实现方法
- ios之自定义导航栏背景,标题和返回按钮文字颜色
- 微信小程序配置顶部导航条标题颜色
- iOS 7+自定义导航栏背景,标题和返回按钮文字颜色
- 微信小程序自定义导航栏 navigation bar 返回键 首页
- 微信小程序-隐藏和显示自定义的导航
- 微信小程序自定义导航隐藏和显示功能
- Swift- 自定义导航栏背景、标题和返回按钮属性
- 微信小程序系列十:自定义底部导航
- iOS 自定义导航栏背景,左侧按钮,右侧按钮,及标题
- 美化你的android程序:自定义ListView背景
- IOS 自定义导航栏标题和返回按钮标题
- 微信小程序 自定义消息提示框
- 微信小程序自定义Toast
- IOS 自定义导航栏标题和返回按钮标题
- 微信小程序-弹出自定义对话框
- 自定义iOS7导航栏背景,标题和返回按钮文字颜色
- 微信分享获取不到自定义标题和图片
- 微信小程序背景图片完全覆盖显示