1. uniapp导航栏动态修改
在uniapp中，导航栏是每个页面的重要组成部分，在页面跳转、返回或者状态改变时，需要动态修改导航栏的标题和样式。本文将介绍uniapp中如何实现导航栏的动态修改。
1.1 修改导航栏标题
要修改当前页面的导航栏标题，可以通过调用uniapp提供的setNavigationBarTitle()方法实现。该方法接收一个参数title，表示要设置的导航栏标题。
例如，我们要在一个页面中将导航栏标题设置为“详情页”：
export default {
onReady() {
uni.setNavigationBarTitle({title:'详情页'})
}
}
在页面渲染完成后，调用setNavigationBarTitle()方法即可将导航栏标题修改为“详情页”。
1.2 修改导航栏样式
除了修改导航栏标题外，还可以通过修改导航栏的样式来达到动态修改导航栏的效果。uniapp提供了setNavigationBarColor()方法来修改导航栏的背景色、前景色、及状态栏样式。
该方法接收四个参数，分别是：
- backgroundColor：导航栏背景色，支持rgba、hex等颜色表示方式；
- frontColor：导航栏前景色，包括导航栏标题、返回按钮等颜色；
- animation：导航栏样式改变的过渡动画，可以设置为none、slide、fade；
- statusBarColor：状态栏的背景色，仅支持#RRGGBB格式表示。
例如，我们想要将导航栏的背景色修改为白色，前景色修改为黑色：
export default {
onReady() {
uni.setNavigationBarColor({
backgroundColor:'#FFFFFF',
frontColor:'#000000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
}
}
在调用setNavigationBarColor()方法时，我们设置了背景色为白色，前景色为黑色，过渡动画为easeIn，表示变化会加速直到结束。此外，我们还可以设置状态栏样式的背景色，例如statusBarColor:'#FFFFFF'将状态栏都设置成白色。
2. uniapp导航栏动态修改的应用场景
通过动态修改导航栏的标题、样式，我们可以实现很多有趣的效果，例如：
2.1 改变导航栏颜色
在uniapp中，如果需要在不同的页面中展现不同的颜色主题，我们可以通过修改导航栏样式来实现。
例如，我们在一个深色主题的页面中使用导航栏的样式：
export default {
onReady() {
uni.setNavigationBarColor({
backgroundColor:'#000000',
frontColor:'#FFFFFF',
animation: {
duration: 400,
timingFunc: 'easeIn'
},
statusBarColor:'#000000'
})
}
}
在另一个浅色主题的页面中使用导航栏的样式：
export default {
onReady() {
uni.setNavigationBarColor({
backgroundColor:'#FFFFFF',
frontColor:'#000000',
animation: {
duration: 400,
timingFunc: 'easeIn'
},
statusBarColor:'#FFFFFF'
})
}
}
通过设置不同的背景色、前景色，我们可以快速切换不同主题的颜色方案，并且在状态栏中也能看到一致的变化。
2.2 动态修改导航栏标题
动态修改导航栏标题的应用场景非常多，例如：
- 当用户在输入框中输入内容时，将输入的内容设置为导航栏标题；
- 当用户在其他页面中完成了某个操作后，跳转回当前页面，并将操作结果作为导航栏标题展示；
- 根据当前的网络状态，设置不同的导航栏标题等。
而要实现动态修改导航栏标题，只需要调用setNavigationBarTitle()方法即可，十分方便。
3. 总结
动态修改导航栏标题和样式是uniapp中非常常见的操作之一，在实际开发中，我们需要根据不同的场景，动态修改导航栏的标题和样式，以展现不同的视觉效果。而在uniapp中，实现这些动态修改的效果非常简单，只需要调用setNavigationBarTitle()和setNavigationBarColor()方法即可轻松实现。