uni-app头部导航组件开发（4.1）

<template>
  <view class="bg-light">
    <!-- 状态栏 -->
    <view :style="'height:'+statusBarHeight+'px'"></view>
    <!-- 导航 -->
    <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
      <!-- 左边 -->
      <view class="flex align-center">
        <!-- 标题 -->
        <text class="font-md ml-3">微信(100)</text>
      </view>
      <!-- 右边 -->
      <view class="flex align-center">
          <view class="flex align-center justify-center"
          hover-class="bg-hover-light"
          style="height: 90rpx;width: 90rpx;">
            <text class="iconfont font-md">&#xe6e3;</text>
          </view>
          <view class="flex align-center justify-center"
          hover-class="bg-hover-light"
          style="height: 90rpx;width: 90rpx;">
            <text class="iconfont font-md">&#xe682;</text>
          </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        statusBarHeight: 0,
      }
    },
    onLoad() {
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight();
      // #endif
    },
    methods: {
    }
  }
</script>
<style>
</style>