uniapp自定义顶部导航栏左中右

在uniapp中，你可以通过自定义顶部标题栏的组件来实现左中右布局。下面是一个简单的示例：

<template>
  <view>
    <custom-header>
      <view slot="left">左边内容</view>
      <view slot="center">中间内容</view>
      <view slot="right">右边内容</view>
    </custom-header>
  </view>
</template>

<script>
  export default {
    components: {
      // 注册自定义头部组件
      'custom-header': {
        template: `
          <view class="header">
            <slot name="left"></slot>
            <slot name="center"></slot>
            <slot name="right"></slot>
          </view>
        `
      }
    }
  }
</script>

<style>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    background-color: #f5f5f5;
    padding: 0 10px;
  }
</style>

在这个示例中，我们使用了一个自定义的头部组件`custom-header`，在组件的模板中使用了三个`slot`，分别命名为`left`、`center`和`right`。在页面中使用`custom-header`组件时，可以在对应的`slot`中插入内容，实现左中右布局。

你可以根据自己的需求来修改头部组件的样式和布局。希望能帮到你！如果有任何问题，请随时向我提问。