微信小程序自定义navigationbar

微信小程序自定义navigationbar非常简单，你只需要在页面的配置文件（.json）中添加"navigationStyle": "custom"，然后在页面的wxml文件中添加自己想要的导航栏元素即可。

例如，你可以在wxml文件中添加一个自定义导航栏的代码：

<view class="navigationBar">
  <view class="navigationBar-backIcon"></view>
  <view class="navigationBar-title">自定义导航栏</view>
</view>

CSS样式：

.navigationBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 14px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.navigationBar-backIcon {
  width: 24px;
  height: 24px;
  background-color: #666;
  border-radius: 50%;
}

.navigationBar-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

然后，你还需要在页面的js文件中添加导航栏的事件处理，比如返回上一页：

Page({
  //返回上一页
  navigateBack() {
    wx.navigateBack({
      delta: 1
    })
  }
})

在wxml文件中添加返回按钮，并绑定事件处理函数：

<view class="navigationBar-backIcon" bindtap="navigateBack"></view>

这样，你就可以非常轻松地自定义微信小程序的导航栏了。注意，自定义导航栏会使得小程序原生的导航栏失效，因此你需要自己实现返回等导航功能。