原理: 通过将原来的头禁用，页面自然而然的就会顶上去，然后封装一个导航栏的组件
这里是用uniapp开发的
下面是效果图:
#####1.pages.json配置 首先禁用所有头导航，在pages.json的window里加一行这个，你会发现所有头都消失了。
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#FFF"
"navigationStyle": "custom"
},
也可以只改某个页面的头部
{
"path": "pages/work/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#3369FF",
"navigationBarTextStyle": "#ffffff",
"navigationStyle": "custom"
}
},
#####2.封装组件 wxml文件
<template>
<view class='flex commonHead' :style="{color: (myProperty.color?myProperty.color:'#000'),backgroundColor:(myProperty.bg_color?myProperty.bg_color:'white'),height:commonHeadHeight.titleHeight+'px'}">
<view class='commonHead-wrap flex'>
<!-- 0:无返回；1：返回上一级；2：home -->
<view class='commonHead_left'>
<view v-if="myProperty.flag==1" class='commonHead_left_back' @click='commonHead_left_back'></view>
<view v-else-if="myProperty.flag==2" class='commonHead_left_home' @click='commonHead_left_home'></view>
</view>
<view class='commonHead_right flex' v-if="myProperty.name">
<view class='commonHead_right_text line1'>{{myProperty.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
myProperty: {
type: Object,
value: {
"bg_color": "white",
"color": "#000",
"flag": 1,
"name": "我是标题"
}
}
},
data() {
return {
commonHeadHeight: {},
titleHeight:'',
statusBarHeight: ''
}
},
mounted() {
var that = this;
console.log('121')
uni.getSystemInfo({
success(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.screenHeight)
console.log(res.language)
console.log(res.version)
that.commonHeadHeight.statusBarHeight = (34 * 2)
that.commonHeadHeight.titleHeight = res.statusBarHeight + 46
that.statusBarHeight = (34 * 2)
that.titleHeight = res.statusBarHeight + 46
}
})
},
methods: {
commonHead_left_back() {
console.log("back")
uni.navigateBack();
},
commonHead_left_home() {
console.log("home")
uni.reLaunch({
url: '/pages/work/index'
})
}
}
}
</script>
<style lang="scss" scoped>
@import './custom-component.scss';
</style>
scss文件
/*弹性布局*/
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.noWarp {
flex-wrap: nowrap;
}
/*元素居中*/
.alignC {
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
/*水平排列*/
.flexH {
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
/*垂直排列*/
.flexV {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
/*两端对齐*/
.flexSa {
-webkit-box-pack: justify;
justify-content: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
}
/*居中对齐*/
.flexC {
-webkit-box-pack: center;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
}
.flexSb {
justify-content: space-between;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
}
.flexS {
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
}
.flexE {
-webkit-box-pack: end;
justify-content: flex-end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
-o-justify-content: flex-end;
}
.line1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.commonHead {
width: 100%;
height: 128rpx;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
z-index: 10;
position: fixed;
}
.commonHead-wrap {
width: 100%;
position: absolute;
overflow: hidden;
left: 0;
bottom: 0;
height: 45px;
line-height: 45px;
}
.commonHead_left {
width: 100rpx;
height: 100%;
position: absolute;
left: 0;
top: 0
}
.commonHead_left_back {
width: 100%;
height: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAYAAABmMXGeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAXUlEQVRIx+3WQQqAMBBD0ShCPbVzLI/3uxKKoIt2QKjJAR5ZhUgJAQ4gMqwWvDIO30CAE9iywWLQ4IzgbnAmUNIqaRkB3tpGdlvD38L9g2LY8A/g/iv5AKe+6WjBCnrg2r3q/P2xAAAAAElFTkSuQmCC);
background-size: 20%;
background-repeat: no-repeat;
background-position: center;
}
.commonHead_left_home {
width: 100%;
height: 100%;
background-image: url(data:image/png;);
background-size: 40rpx 40rpx;
background-repeat: no-repeat;
background-position: center;
}
.commonHead_right {
/* width: 450rpx; */
width: 100%;
height: 100%;
line-height: 88rpx;
text-align: center;
font-size: 30rpx;
overflow: hidden;
justify-content:flex-end;
}
.commonHead_right_text {
/* width: 450rpx; */
width: 280rpx;
margin: 0 auto;
}
3.具体页面
<template>
<view class="work">
<customComponent :my-property="myProperty" />
<view>这里是页面内容</view>
<view>
</template>
<script>
export default {
data() {
return {
myProperty: {
bg_color: "transparent",
color: "#fff",
flag: 0,
name: "首页"
}
}
}
}
</script>
4.小程序胶囊颜色修改 pages.json
{
"navigationBarBackgroundColor": "#3369FF",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white"
}
"navigationBarTextStyle":"white" "navigationBarTextStyle":"black"
