我要一个微信小程序的顶部导航栏代码

以下是一个简单的微信小程序顶部导航栏示例代码：

<view class="nav-bar">
  <view class="nav-bar-left">
    <image src="/images/left-arrow.png" class="nav-bar-back" bindtap="navBack"></image>
  </view>
  <view class="nav-bar-title">{{title}}</view>
  <view class="nav-bar-right">
    <image src="/images/search.png" class="nav-bar-search" bindtap="navSearch"></image>
  </view>
</view>

其中，nav-bar 类用于设置导航栏的样式，nav-bar-left 和 nav-bar-right 分别用于设置左侧和右侧的按钮样式，nav-bar-title 用于设置标题样式。在 JavaScript 中，可以通过设置 title 变量来动态改变标题内容，同时通过绑定 navBack 和 navSearch 方法来处理左侧和右侧按钮的点击事件。

顶部导航栏的样式可以在 CSS 中进行设置，例如：

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.nav-bar-left,
.nav-bar-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
}

.nav-bar-back,
.nav-bar-search {
  width: 24px;
  height: 24px;
}

.nav-bar-title {
  font-size: 18px;
  font-weight: bold;
}

通过设置 flex 布局和样式属性，可以灵活地调整导航栏的样式。