1.直接去掉导航栏 在界面里自定义导航栏
在pages.json中style添加
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#000000",
"backgroundColor": "#303133",
// "app-plus": {
// "background": "#303133"
// },
"navigationStyle":"custom",
"app-plus":{
"titleView":false
}
}
2.创建自定义标题组件
在components文件夹里创建自定义组件
<template>
<view class="header" >
<view class="flexbox" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleColor, 'background': bgColor}]">
<!-- <view @tap="goBack">
<slot name="back">返回</slot>
</view> -->
<view style="width: 36px;"></view>
<view>{{title}}</view>
<view style="width: 36px;"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarH: 0,
customBarH: 0
}
},
props: {
title: { type: String, default: '' },
titleColor: { type: String, default: '#ffffff' },
bgColor: { type: String, default: '#000000' },
},
methods: {
goBack() {
uni.navigateBack()
}
},
created() {
let self = this;
uni.getSystemInfo({
success:function(e){
self.statusBarH = e.statusBarHeight + 10
let custom = wx.getMenuButtonBoundingClientRect()
self.customBarH = custom.height + 10
}
})
}
}
</script>
<style>
.header{
width: 100vw;
}
.flexbox{
display: flex;
justify-content: space-between;
padding: 0 20px;
}
</style>
3.使用自定义组件
<header-bar :title=titleName >
<!-- <text slot="back">返回</text> -->
</header-bar>
<script>
export default {
data() {
return {
titleName="标题"
}
}
}
</script>