Uniapp开发微信小程序如何实现自定义的导航栏？

  在使用Uniapp开发微信小程序时，如果想要实现自定义的导航栏操作，我们可以可以通过隐藏原生导航栏，并在页面上自行布局来实现。这种方式可以让你更灵活地设计导航栏的样式和功能。下面我们就来看看如何实现自定义的导航栏。

隐藏原生导航栏

  首先，需要在pages.json的中配置，隐藏微信小程序的原生导航栏。通过在 pages.json 中的页面配置中，添加 “navigationStyle”: “custom” 来隐藏系统默认的导航栏，如下所示。

{
   
  "pages": [
    {
   
      "path": "pages/index/index",
      "style": {
   
        "navigationStyle": "custom"
      }
    }
  ]
}

自定义导航栏布局

  接下来就是在页面的wxml或vue模板中，手动创建一个导航栏的布局，包括返回按钮、标题、右侧按钮等内容。当然我们也可以根据自己的需求来定制布局，下面给出了一个简单的布局实现。

<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ height: navHeight + 'px' }">
      <view class="navbar-left" @click="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <view class="navbar-title">
        <text>自定义导航栏</text>
      </view>
      <view class="navbar-right">
        <!-- 右侧可以放一些操作按钮 -->
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="page-content" :style="{ marginTop: navHeight + 'px' }">
      <text>这是页面内容区域</text>
    </view>
  </view>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      navHeight: 0, // 导航栏高度
    };
  },
  onLoad() {
     
    // 获取系统信息，计算导航栏高度
    uni.getSystemInfo({
     
      success: (res) => {
     
        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        const statusBarHeight = res.statusBarHeight;