前言
navigationBarTitleText用于小程序设置当前页面标题，可以给每个页面设置独立的标题，但是这样不能满足一些特殊业务场景；比如说商城，商品详情页面的标题，会根据获取到的数据动态修改，下面就来说说如何动态修改标题以及导航条相关设置。
正文
一、wx.setNavigationBarTitle
1.设置整个小程序通用标题，在app.json里设置：
"window": {
"navigationBarTitleText": "华美整呗"
}
2.单独设置页面标题，在对应页面json文件里设置（子页面设置会覆盖通用设置）：
{
"navigationBarTitleText": "首页"
}
3.动态设置，比如说：我们从接口拿到商品名称后，把商品名称设置到标题上
wx.request({
url: "请求接口url",
method: "POST",
data: {},
success: function (res) {
if (res.data.code == 200) {
// 修改navigationBarTitleText
wx.setNavigationBarTitle({
title: goods_name
})
}
}
})
tips：动态设置 > 页面独立设置 > 通用设置
效果图：
在这里插入图片描述
当然，另外我们可以通过点击事件来动态设置标题：
test: function () {
wx.setNavigationBarTitle({
title: "我是点击后的标题"
})
}
效果图：
在这里插入图片描述
二、wx.setNavigationBarColor
设置页面导航条颜色
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
- frontColor：前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
- backgroundColor：背景颜色值，有效值为十六进制颜色
- animation：动画效果
①animation的结构包括：duration，timingFunc；
②timingFunc：linear（动画从头到尾的速度是相同的），easeIn（动画以低速开始），easeOut（动画以低速结束），easeInOut（动画以低速开始和结束）
效果图：
在这里插入图片描述
三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading
- wx.showNavigationBarLoading：在当前页面显示导航条加载动画
- wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画
index.wxml
<button bindtap="showLoading">显示加载动画</button>
<button bindtap="hideLoading">隐藏加载动画</button>
index.js
// 显示加载动画
showLoading: function () {
wx.showNavigationBarLoading()
},
// 隐藏加载动画
hideLoading: function () {
wx.hideNavigationBarLoading()
}
效果图：
在这里插入图片描述
四、wx.hideHomeButton
隐藏返回首页按钮。微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。
onShow: function(){
wx.hideHomeButton();
}
效果图（隐藏箭头所指处）：
在这里插入图片描述
总结
- 导航条相关都可以根据自己需求来进行设置，基本满足大多数需求。
- 如果需要自定义顶部导航，请前往文章：【微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例） 】
