自定义微信小程序导航栏

默认的导航栏NavigationBar不支持触摸事件, 需要自定义导航栏. 官方社区有个文档可以参考https://developers.weixin.qq.com/community/develop/article/doc/000a8c989307888cbe1abbf675f413

以下是gpt4o的回答.

在微信小程序中，原生的导航栏（通过 navigationBarTitleText 等配置项定义的顶部标题栏）本身不支持直接添加点击事件。不过，你可以采用一些变通的方法来实现类似的效果。

自定义导航栏

你可以通过自己编写一个自定义导航栏组件来实现点击事件。这通常涉及隐藏原生导航栏，并在页面顶部放置一个自定义视图组件。

隐藏原生导航栏

在 app.json 或单个页面的 json 文件中，将 navigationStyle 设置为 "custom"。

{
  "navigationStyle": "custom"
}

创建自定义导航栏

创建一个自定义组件，例如 custom-navbar:

custom-navbar.wxml

<view class="navbar">
  <view class="navbar-title" bindtap="onTitleClick">{{title}}</view>
</view>

custom-navbar.wxss

.navbar {
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-title {
  font-size: 18px;
}

custom-navbar.js

Component({
  properties: {
    title: {
      type: String,
      value: '默认标题'
    }
  },

  methods: {
    onTitleClick() {
      // 自定义逻辑，比如跳转或者弹出提示等
      wx.showToast({
        title: '标题被点击了',
        icon: 'none'
      });
    }
  }
})

在页面中使用自定义导航栏

page.wxml

<custom-navbar title="我的标题"></custom-navbar>
<view class="page-content">
  <!-- 页面内容 -->
</view>

这样一来，你就可以在自定义导航栏中处理各种点击事件，完全掌控其行为和样式。此外，自定义导航栏组件可以反复使用，还能根据需要灵活调整。