uni-app像小程序中的自定义头部（万能封住头部）

第一：先在App.vue中全局获取不同手机的顶部高度
在methods:{
getPhoneHeight(){
let that =this
uni.getSystemInfo({
success:function(res){
that.globalData.phoneHeight=res.statusBarHeight
}
})
}
}

第二步
在components中写公共组件
uni-topBar.vue

<template>

<view class="nav-box" style="margin-top:{{phoneHeight}}px">
<view class='nav-top-one'>
<image src='../static/images/tback.png' class="nav-top-left" @click="backpage"></image>
<view class="nav-top-center"></view>
<image src='../static/images/home.png' class="nav-top-right" @click="BackHome"></image>
</view>
<view class="nav-top-text">{{titleName.addredd}}</view>
</view>
</template>

<script>
// app中的全局需要在每个页面进行引入
import app from '../App.vue'
export default {
//
name: "uniNavBar",
// 接受父组件的传值，可以接受多个中 在父组件中用v-bind 来绑定
props: {
// 接受父组件的传值
titleName: {
type: Object
}
},
data() {
return {
phoneHeight:app.globalData.phoneHeight //这里在进行调用
};
},
// 事件
methods: {
backpage() {
uni.navigateBack({
delta: 1
});
},
BackHome(){
// 关闭当前页面
uni.switchTab({
url: '/pages/index/index'
});
}
},
// 生命周期

}

</script>

<style>
.nav-box {
position:relative;
padding-left: 16rpx;
background:#ffffff;
height:76rpx;

}

.nav-top-one {
    width: 174rpx;
    height: 64rpx;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 32rpx;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 0 26rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-top-left {
    height: 36rpx;
    width: 36rpx;
}

.nav-top-right {
    height: 36rpx;
    width: 36rpx;
}

.nav-top-center {
    width: 1px;
    height: 18px;
    background: rgba(51, 51, 51, 1);
    opacity: 0.2;
}

.nav-top-text {
    position: absolute;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    height: 52rpx;
    line-height: 52rpx;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    
}

</style>
第三步：
在需要的页面进行引入 和vue引入公共组件的方法一样
html:

<uniNavBar :titleName="topData"></uniNavBar>
js:
import uniNavBar from "../../../components/uni-nav-bar.vue"

components:{
uniNavBar
},

最后效果显示

悟空—不死谢谢