uniapp工具条
uniapp工具条的基本概念
Uniapp工具条通常指顶部导航栏（NavigationBar）或自定义的底部/顶部工具栏，用于展示标题、返回按钮、操作菜单等。其样式和功能可通过配置或组件实现。
配置原生导航栏
在pages.json中修改全局或页面级导航栏样式：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#007AFF",
"navigationBarTextStyle": "white"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "默认标题"
}
}自定义工具条组件
通过<view>和CSS创建自定义工具栏，适合灵活布局：
<template>
<view class="custom-toolbar">
<text class="title">自定义标题</text>
<button @click="handleAction">操作</button>
</view>
</template>
<style>
.custom-toolbar {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #f8f8f8;
}
</style>使用uni-ui组件库
通过uni-ui的uni-nav-bar组件快速实现导航栏：
<uni-nav-bar
title="标题"
left-icon="back"
@clickLeft="goBack"
right-text="更多"
@clickRight="showMenu">
</uni-nav-bar>需先安装uni-ui插件，并在项目中引入组件。
动态修改工具条内容
通过uni.setNavigationBarTitle动态更新标题：
uni.setNavigationBarTitle({
title: "新标题"
});注意事项
- 原生导航栏的样式受平台限制（如iOS和Android表现可能不同）。
- 自定义组件需处理适配问题，例如刘海屏安全区域（使用
safe-area-inset-bottom等CSS）。 - 部分API（如动态修改导航栏）在小程序中可能需要异步处理。
