titleBar是哪里

就是小程序上方由胶囊占据的bar，就叫titleBar。

为什么要获取它的高度

因为我们可以在胶囊左侧写标题和其他一些东西。这些东西要跟胶囊中线对齐。

怎么获取它的高度

首先我们要撑起statusBar的高度，也就是最顶部的那个bar。这个bar的高度很容易取得。

uni.getMenuButtonBoundingClientRect().top取得的是胶囊距离视口顶部的距离，减掉statusBar的高度，就是胶囊离statusBar下沿的距离。这个距离乘以2，加上胶囊自身高度，就是titleBar的高度。

<template>
  <view :style="{paddingTop: statusBarHeight + 'px'}">
    <view :style="{height: titleBarHeight + 'px', backgroundColor: 'red'}"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        statusBarHeight: 0,
        titleBarHeight: 0,
      }
    },
    onLoad() {
      const SystemInfo = wx.getSystemInfoSync();
      this.statusBarHeight = SystemInfo.statusBarHeight;
    },
    onReady() {
      this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
        uni.getMenuButtonBoundingClientRect().height;
    },
  }
</script>

效果

见红色部分。

开发者工具中会有略微错位，无妨，以真机为准。

image.png

怎么获取胶囊左侧空白区域的宽度

我们希望胶囊左侧空白区域与胶囊有间距，而且间距最好是等于胶囊到右边边线的距离。这个前提下，左侧空白区域的宽度怎么算？

      this.titleBarWidth = uni.getSystemInfoSync().windowWidth - uni.getMenuButtonBoundingClientRect().width -
        (uni.getSystemInfoSync().windowWidth - uni.getMenuButtonBoundingClientRect().right) * 2;

组件化

写成组件就是这样：

<template>
  <view :style="{paddingTop: statusBarHeight + 'px'}">
    <view :style="{width: titleBarWidth + 'px', height: titleBarHeight + 'px'}">
      <slot :menuButtonHeight="menuButtonHeight" :titleBarHeight="titleBarHeight"></slot>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        statusBarHeight: 0,
        menuButtonHeight: 0,
        titleBarWidth: 0,
        titleBarHeight: 0,
      }
    },
    created() {
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    },
    onReady() {
      this.menuButtonHeight = uni.getMenuButtonBoundingClientRect().height;
      this.titleBarWidth = uni.getSystemInfoSync().windowWidth - uni.getMenuButtonBoundingClientRect().width -
        (uni.getSystemInfoSync().windowWidth - uni.getMenuButtonBoundingClientRect().right) * 2;
      this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
        this.menuButtonHeight;
    }
  }
</script>

用法：

演示如何使用作用域插槽：

    <title-bar>
      <template v-slot="{menuButtonHeight}">
        <view class="flex align-center h-100 padding-left-20">
          <image src="/static/default-avatar.png"
            :style="{width: menuButtonHeight + 'px', height: menuButtonHeight + 'px'}"
            class="block margin-right-20"
          />
          请先登录
        </view>
      </template>
    </title-bar>