1.在pages.json中,在想要配置的页面设置
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
2.在components文件夹下新建头部组件
<template>
<view class="content" :style="{paddingTop:headerArea.status_height+'px'}">
<view class="header flex justify-content-between align-items-center" :style="{height:headerArea.title_height+'px'}">
<view class="">
</view>
<view class="">{{title}}</view>
<view class=""></view>
</view>
</view>
</template>
<script>
export default {
name:'header',
props:{
title:{
type:String,
default:()=>'头部'
}
},
computed:{
headerArea() {
let area = uni.getSystemInfoSync();
// #ifdef MP-WEIXIN
let menu = uni.getMenuButtonBoundingClientRect();
return {
status_height: area.statusBarHeight,
title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
menuLeft: menu.left
};
// #endif
// #ifndef MP-WEIXIN
return {
status_height: area.statusBarHeight,
title_height: uni.upx2px(80),
menuLeft: 0
};
// #endif
}
},
methods: {
}
}
</script>
<style>
.header{
}
</style>
3.在想要设置头部的页面直接使用
tips:
uniapp可通过在pages.json文件中配置easycom,可直接在页面中使用组件,无需引入
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},