uni-app 4.4封装头部导航组件（二）

<template>
  <view class="">
    <free-nav-bar :title="'微信（100）'" :fixed='true'>
      <template v-slot="title"></template>
    </free-nav-bar>
  </view>
</template> 
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  export default {
    components: {
      freeNavBar
    },
    data() {
      return {
        
      }
    },
    onLoad() {
      
    },
    methods: {
    }
  }
</script>
<style>
</style>

<template>
  <view>
    <view class="bg-light" :class="fixed?'fixed-top':''">
      <!-- 状态栏 -->
      <view :style="'height:'+statusBarHeight+'px;'"></view>
      <!-- 导航 -->
      <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
        <!-- 左边 -->
        <view class="flex align-center">
          <!-- 标题 -->
          <text v-if="title" class="font-md ml-3">{{title}}</text>
        </view>
        <!-- 右边 -->
        <view class="flex align-center">
          <free-icon-button @click="btn1"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
          <free-icon-button @click="btn2"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
        </view>
        <!--\ue6e3 \ue682 -->
      </view>
    </view>
    <!-- 站位 -->
    <view v-if="fixed" :style="fixedStyle"></view>
  </view>
</template>
<script>
  import freeIconButton from './free-icon-button.vue';
  export default {
    components: {
      freeIconButton,
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      fixed:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        statusBarHeight: 0,
        navBarHeight: 0,
      }
    },
    mounted() {
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    },
    computed: {
      fixedStyle() {
        return `height:${this.navBarHeight}px`;
      }
    }
  }
</script>
<style>
</style>