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

Posted 2023-03-16

参考技术A 第一：先在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:phoneHeightpx">
<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;

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

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

components:
uniNavBar
,

最后效果显示

悟空—不死谢谢