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

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

浏览量:710 时间: 来源:uzhongbut

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


通过配置页面 page.json参数实现:

页面配置参数
                                                                       
属性类型默认值描述
navigationBarBackgroundColorHexColor000000导航栏背景颜色, 如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColorffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px。详见 Page.onReachButom
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项
页面配置
{  "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色  "navigationBarTextStyle": "black",         //导航栏标题颜色(包括文本以及导航栏图标)  "navigationBarTitleText": "标题名称",       //导航栏标题  "backgroundColor": "#eeeeee",              //窗口的背景色(下拉可以看见)  "backgroundTextStyle": "light"             //下拉 loading 的样式,仅支持 dark / light}

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


页面标题(wx.setNavigationBarTitle(object))
wx.setNavigationBarTitle({    title: '标题名称'});      
                                       
参数类型必填说明
titleString页面标题
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
页面标题(wx.setNavigationBarColor(object))
wx.setNavigationBarColor({    frontColor: '#000000',    backgroundColor: '#ffffff'})
                                                                       
参数名类型必填说明
frontColorString前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
backgroundColorString背景颜色值,有效值为十六进制颜色
animationObject动画效果
animation.durationNumber动画变化时间,默认0,单位:毫秒
animation.timingFuncString动画变化方式,默认 linear
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

animation.timingFunc 有效值:

                   
说明
linear动画从头到尾的速度是相同的。
easeIn动画以低速开始
easeOut动画以低速结束。
easeInOut动画以低速开始和结束。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎