warm_man/uni_modules/mz-header/components/mz-sticky/mz-header.vue

<template>
	<view class="mz-header-container" :style="{top:(offsetTop === '0')?offSetDefault:offsetTop,position:type}">
    <view class="safe-area-top" :style="{height:safeHeight,display:((type !== 'sticky') || 'none')}"></view>
    <slot />
  </view>
</template>

<script>
	import props from './props.js';
	/**
	 * header  头部
	 * @description 警告提示，展现需要关注的信息。
	 * 
	 * @property {String}			title       显示的文字
	 */
	export default {
		name: 'mz-header',
		mixins: [props],
		data() {
			return {
				show: true,
        safeHeight:''
      }
		},
		computed: {
      offSetDefault(){
        return uni.getSystemInfoSync().statusBarHeight+44+'px';
      },
		},
		methods: {
      getSafeHeight(){
        new Promise((resolve,reject) => {
            resolve(uni.getSystemInfoSync().statusBarHeight);
        }).then((height) => {
          this.safeHeight = height+'px';
        })
      },
		},
    mounted() {
      this.getSafeHeight();
    },
	}
</script>

<style lang="scss" scoped>
  .safe-area{
    width:100%;
  }
  .mz-header-container{
    width:100%;
    z-index: 997;
  }
</style>