微信小程序中的 navigation-bar 是用于定制页面顶部导航栏的组件，它可以帮助你自定义页面标题、背景颜色、返回按钮等内容。以下是一些 navigation-bar 的基本用法：

1. 设置页面标题：
   <navigation-bar title="页面标题"></navigation-bar>
   这会在页面的顶部显示一个带有指定标题的导航栏。

2. 自定义导航栏颜色：
   <navigation-bar title="自定义颜色" background-color="#2f87f7" color="#ffffff"></navigation-bar>
   通过 background-color 设置导航栏的背景颜色，通过 color 设置文字颜色。

3. 添加返回按钮：
   <navigation-bar title="带返回按钮" show-back="{{true}}"></navigation-bar>
   设置 show-back 属性为 true 可以显示返回按钮，默认情况下是隐藏的。

4. 设置返回按钮文字：
   <navigation-bar title="返回按钮文字" show-back="{{true}}" back-text="返回"></navigation-bar>
   通过 back-text 设置返回按钮上显示的文字。

5. 返回按钮点击事件：
   <navigation-bar title="返回按钮点击" show-back="{{true}}" bind:back="onBack"></navigation-bar>
   通过 bind:back 绑定返回按钮的点击事件，然后在对应的 .js 文件中定义 onBack 函数。

6. 自定义右上角内容：
   <navigation-bar title="自定义右上角" show-back="{{true}}">
     <view slot="right">自定义内容</view>
   </navigation-bar>
   在 slot="right" 中添加自定义的内容，可以实现自定义右上角按钮等功能。

这是一些基本的 navigation-bar 使用示例，你可以根据实际需求调整标题、颜色、返回按钮等设置。通过这些设置，可以更好地适应小程序页面的样式需求。需要注意的是，navigation-bar 在小程序基础库版本 2.9.0 引入，确保你的小程序基础库版本在这个版本或以上。


转载请注明出处：http://www.zyzy.cn/article/detail/815/微信小程序