backgroundcolor小程序_微信小程序：动态设置页面标题、导航条

前言

navigationBarTitleText用于小程序设置当前页面标题&＃xff0c;可以给每个页面设置独立的标题&＃xff0c;但是这样不能满足一些特殊业务场景&＃xff1b;比如说商城&＃xff0c;商品详情页面的标题&＃xff0c;会根据获取到的数据动态修改&＃xff0c;下面就来说说如何动态修改标题以及导航条相关设置。

正文

一、wx.setNavigationBarTitle

1.设置整个小程序通用标题&＃xff0c;在app.json里设置&＃xff1a;

2.单独设置页面标题&＃xff0c;在对应页面json文件里设置&＃xff08;子页面设置会覆盖通用设置&＃xff09;&＃xff1a;

3.动态设置&＃xff0c;比如说&＃xff1a;我们从接口拿到商品名称后&＃xff0c;把商品名称设置到标题上

***tips&＃xff1a;动态设置 > 页面独立设置 > 通用设置

效果图&＃xff1a;

当然&＃xff0c;另外我们可以通过点击事件来动态设置标题&＃xff1a;

效果图&＃xff1a;

二、wx.setNavigationBarColor

设置页面导航条颜色

• frontColor&＃xff1a;前景颜色值&＃xff0c;包括按钮、标题、状态栏的颜色&＃xff0c;仅支持 #ffffff 和 #000000
• backgroundColor&＃xff1a;背景颜色值&＃xff0c;有效值为十六进制颜色
• animation&＃xff1a;动画效果

①animation的结构包括&＃xff1a;duration&＃xff0c;timingFunc&＃xff1b;

②timingFunc&＃xff1a;linear&＃xff08;动画从头到尾的速度是相同的&＃xff09;&＃xff0c;easeIn&＃xff08;动画以低速开始&＃xff09;&＃xff0c;easeOut&＃xff08;动画以低速结束&＃xff09;&＃xff0c;easeInOut&＃xff08;动画以低速开始和结束&＃xff09;

效果图&＃xff1a;

三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading

• wx.showNavigationBarLoading&＃xff1a;在当前页面显示导航条加载动画
• wx.hideNavigationBarLoading&＃xff1a;在当前页面隐藏导航条加载动画

index.wxml

index.js

效果图&＃xff1a;

四、wx.hideHomeButton

隐藏返回首页按钮。微信7.0.7版本起&＃xff0c;当用户打开的小程序最底层页面是非首页时&＃xff0c;默认展示“返回首页”按钮&＃xff0c;开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

效果图&＃xff08;隐藏箭头所指处&＃xff09;&＃xff1a;

总结

• 导航条相关都可以根据自己需求来进行设置&＃xff0c;基本满足大多数需求。
• 如果需要自定义顶部导航&＃xff0c;请前往文章&＃xff1a;【微信小程序自定义navigationBar顶部导航栏&＃xff0c;兼容适配所有机型&＃xff08;附完整案例&＃xff09;】