uniapp如何自定义标题栏

在Uniapp中，可以使用uni.setNavigationBarTitle方法动态设置页面标题。如果需要自定义标题栏的样式，可以在App.vue中使用全局导航栏组件uniNavBar来实现。 以下是一个简单的自定义标题栏的示例： 在App.vue文件中，定义一个uniNavBar组件，并在其内部添加需要的自定义元素，例如logo和标题：

<code>
<template>
  <view>
    <uni-nav-bar>
      <view class="uni-logo"></view>
      <view class="uni-title">自定义标题栏</view>
    </uni-nav-bar>
    <router-view></router-view>
  </view>
</template></code>

<code>
<script>
  export default {
    components: {
      uniNavBar
    }
  }
</script></code>

<code>
<style scoped>
  .uni-logo {
    width: 30px;
    height: 30px;
    background-image: url('/static/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
  .uni-title {
    font-size: 18px;
    color: #333;
  }
</style></code>

在页面组件中，使用uni.setNavigationBarTitle方法设置页面标题：

<code>
<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template></code>

<code>
<script>
  export default {
    onShow() {
      uni.setNavigationBarTitle({
        title: '页面标题'
      })
    }
  }
</script></code>

在这个例子中，uniNavBar组件被用来自定义标题栏。我们在组件内部添加了一个logo和一个标题元素。我们还可以通过在style中设置样式来自定义元素的外观和样式。 然后在页面组件中，使用uni.setNavigationBarTitle方法来动态设置页面标题。这样，在应用程序中每个页面的标题栏都会显示自定义的标题栏。