uni-app 4.3封装头部导航组件（一）

<template>
  <view class="">
    <free-nav-bar :title="'微信（100）'">
      <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 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 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>
</template>
<script>
    import freeIconButton from './free-icon-button.vue';
  export default {
    components: {
      freeIconButton,
    },
    props: {
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        statusBarHeight: 0
      }
    },
    mounted() {
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
        this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    }
  }
</script>
<style>
</style>

<template>
  <view class="flex align-center justify-center" 
  hover-class="bg-hover-light" @click="$emit('click')"
  style="height: 90rpx;width: 90rpx;">
    <slot></slot>
  </view>
</template>
<script>
  export default {
    props: {
      icon: {
        type: String,
        default: ''
      },
    },
    mounted() {
      // #ifdef APP-PLUS-NVUE
      // 加载公共图标库
      const domModule = weex.requireModule('dom')
      domModule.addRule('fontFace', {
          'fontFamily': "iconfont",
          'src': "url('/static/font_1365296_2ijcbdrmsg.ttf')"
      });
      // #endif
    }
  }
</script>
<style>
</style>