uniapp微信小程序自定义导航栏

Uniapp微信小程序可以通过以下步骤自定义导航栏：

1. 在App.vue中定义全局导航栏组件，例如：

<template>
  <view class="nav-bar">
    <view class="nav-bar-left" @click="$router.back()">
      <text class="iconfont icon-fanhui"></text>
    </view>
    <view class="nav-bar-title">
      <slot name="title"></slot>
    </view>
    <view class="nav-bar-right"></view>
  </view>
</template>

<script>
export default {
  name: 'NavBar'
}
</script>

<style scoped>
.nav-bar {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

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

.nav-bar-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
</style>

2. 在需要使用导航栏的页面中引入导航栏组件并传入标题，例如：

<template>
  <view>
    <nav-bar>
      <template v-slot:title>
        自定义导航栏
      </template>
    </nav-bar>
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
  components: {
    NavBar
  }
}
</script>

<style>
.content {
  margin-top: 44px;
}
</style>

3. 根据需要在导航栏组件中添加左右按钮，并在按钮的click事件中处理相应的逻辑，例如：

<template>
  <view class="nav-bar">
    <view class="nav-bar-left" @click="$router.back()">
      <text class="iconfont icon-fanhui"></text>
    </view>
    <view class="nav-bar-title">
      <slot name="title"></slot>
    </view>
    <view class="nav-bar-right" @click="handleRightButtonClick()">
      <text class="iconfont icon-add"></text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavBar',
  methods: {
    handleRightButtonClick() {
      // 处理右侧按钮点击事件
    }
  }
}
</script>