uniapp中怎么自定义头部组件并实现宽度自适应

在uniapp中自定义头部组件并实现宽度自适应，可以使用app-plus提供的自定义导航栏功能。

具体实现步骤如下：

1. 在`App.vue`中设置自定义导航栏的样式和内容。

<template>
  <div>
    <!-- 自定义导航栏 -->
    <nav-bar>
      <div class="custom-nav" style="width:100%">
        <!-- 自定义头部组件内容 -->
      </div>
    </nav-bar>
    <!-- 路由页面 -->
    <router-view />
  </div>
</template>

<script>
  export default {
    // 自定义导航栏
    nvue: {
      usingComponents: {
        'nav-bar': '/components/nav-bar/nav-bar'
      }
    }
  }
</script>

2. 在`/components/nav-bar/nav-bar.vue`文件中，使用`slot`插槽将自定义头部组件内容插入到自定义导航栏组件中。

<template>
  <div class="nav-bar">
    <slot></slot>
  </div>
</template>

<style>
  .nav-bar {
    height: 44px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

3. 在路由页面中，通过设置`navigationStyle`属性为`custom`，使用自定义导航栏。

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
  export default {
    // 使用自定义导航栏
    mpOptions: {
      navigationStyle: 'custom'
    }
  }
</script>

这样，就可以在uniapp中自定义头部组件并实现宽度自适应了。在自定义导航栏组件中设置`width:100%`，就可以让头部组件宽度自适应，跟随页面宽度变化而变化。