自定义导航样式一
<template>
<view>
<view class="header" :style="'height:'+(statusBarHeight+44)+'px;padding-top:'+statusBarHeight+'px;background:'+background">
<view class="header_left">
<image @click="onReturn" v-if="isReturn" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABDpJREFUeNrsm1lIlFEUx++YVrZYYWaFVBJEERFoUi9Fe5S2WFFJYFQWbbZYBFHQRgsYbfQSQfQQGaUUoRRltJeZWdliPVRQvYQvQrTYNv0P8x8aP+/44nyL1znwA5n7MN/5z7nnnnO+q8/v96u2bDGqjVtUgKgA3rYh4DioB5KsvoHrkfyCWA87PwxsArNBF34WD9LaggDpYB2d72xZizNdgBFgbRjnFbeDsQIMBwVgJuikWX8NzpsqwCCwhc531Ky/AQdAkYkC9Ad5YFoY5+WX3w1KQINpAojzy8ES0FWz/gpsB2WRdt4LAqTS+VyQqFmvAXvARfDbjgdwU4ABYCWdT9asV4NCcM7Oh4h18ZdfDRaBnpr1KnAQnLX7QdwQYCCdXwy6W9b8dH4/uOTEwzgtwGCwgr+8zvlKZvtyu/a8mwIM5Z6fr3Fe7C3YB66AP049lFMCSFe3hs730Kx/AIcY9o6OqJwQoB/IBzmgm2b9IzgCTjjtvBMC9AVLwbxmnN9P53+5cRzZKYAcbwu57xPDhP0unvOuOG+nAL14zEnGT9Ksv6PzxeCrm6WoHQIkM+zzWO3pGhup8E47me2dEqA3mxoJ+5QwjY1k+5Ne6cEjKUAfOp8fprav5Tl/xksTmEgJkMKwX8X9r3NeWtpS8Nc0AaSfX8ZfX+f8e7CDRU6D8pi1VIAMFRhe5nILWO0z93yJFxKeHQLI9Hay5pf/zqOuiAnPk85HQoDpzVR4MsA8pTxuMTYJKMVNvWoF1lIBasOEdyqPwwWmC1DI7P7T8rn0++OZI6YAn6k5QBqZT4yCLNV0pj8SbAZfwH0TBVB07CcLnBkWESTCRoMNFKnKaydCpCrBx2AvBxoiQnzIWhw/EzsM7pkogDj+TAVeYsgwc5Zq/Ga3Pcjk94kgN01shsSe8/z/oxpfbFCMiqncFrJdbpsogNhTFZjx/aUICSFrHUJEELvrdnNk1x2havYAxSyLlSUniAjyKnyMivCND68IIFbDSCjVdIHtwCSKMFa5eFnL7qmwiCBT3yQ6ahVhHIskSZJlpkVA6HaQecANzVocK0a5EDXRxAgI2i1Gwm866tNEghRTdTxOjRNA7Kr6P/8fT8dDn0O2iIzUjoKXJgoQjIQfLJwmWESQwimXfx9jTWFEDgg1OfMrwDZwTTV9BS59RA57hzQTBQiWzY/ATnBZ0xzJRak5YL0TIrh5WbqimXlCAkUosFsEt2+J3QmJgEzWA0HrRBHkxJD7Qk/sKJu9cF3+gQq8MSpXTe8HSE6YqwK3xjPseF4vCBC8GCXzhBeadYkKuT67EYyynBxGCBAUQQYlW1k5Wk1a6SzmhOxIfrHPg/81ls0mKUOzJjXEQ01f0eojINQusGyu1KxJTkg3cQvoRNjO3ODXdJHGC+DnqSAjdes4vc70HGDcPCAqQFSAqABRATxr/wQYAB/e1gA919zmAAAAAElFTkSuQmCC" mode=""></image>
</view>
<view class="header_title">{{title}}</view>
<slot></slot>
</view>
<view :style="'height:'+(statusBarHeight+44)+'px'"></view>
</view>
</template>
<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
props:{
background:{
type:String,
default:"linear-gradient(-38deg, #FD4819, #FC312B);"
},
title:{
type:String,
default:"默认标题"
},
state:{
type:[Number,String],
default:0
},
//是否返回
isReturn: {
type:Boolean,
default:true
},
},
data() {
return {
statusBarHeight:statusBarHeight
}
},
mounted() {
},
created() {
},
methods:{
onReturn(){
uni.navigateBack()
},
}
}
</script>
<style lang='scss' scoped>
view{
box-sizing: border-box;
}
.header{
width: 750rpx;
height: 88rpx;
background: linear-gradient(-38deg, #FD4819, #FC312B);
display: flex;
align-items: center;
justify-content: space-between;
color: #FEFEFE;
font-size: 33rpx;
padding: 0 25rpx;
position: fixed;
top: 0;
left: 0;
z-index: 100;
.header_left{
image{
width: 38rpx;
height: 38rpx;
position: relative;
left: -8rpx;
}
}
.header_title{
width: 300rpx;
text-align: center;
position: fixed;
right: 0;
left: 0;
margin: 0 auto;
font-size: 36rpx;
}
.header_right{
width: 100rpx;
font-size: 29rpx;
text-align: right;
}
.header_fx{
width: 35rpx;
height: 35rpx;
}
}
</style>
自定义导航样式二
uni.getSystemInfoSync().statusBarHeight
组件定义：
<template>
<view>
<view class="mp-header">
<view class="sys-head" :style="{ height: statusBarHeight }"></view>
<view class="serch-box" style="height: 43px;">
<view class="serch-wrapper flex">
<view class="logo" @tap="onreturn">
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAzCAYAAACE92h3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUZJREFUeNq82EsKwjAQBuD2mrrTrTdw4cKFINKmrSVK9QZexpsIrnQTp6IgtZk0zfwZmFDQ8DFlaB6pMSYBx4JyRnmjXCctCMzSdAKJVaYnUFhhLBHlNf6EjlYZxfndoDExSVANwaRArrJT9//Iypq+OajKGtu8aJWFgFxlR9f8qJgvWIZiPiBX2cHnLYVi2rcHQrpRj+lw7sdcGuNADqtDvk5RsT4QinVBrkH2Uuvm90EzWCW5K2iHiQV6Uu6k9zztcLGAV8Qmqx3mFvBBuUWAyefja4sCAbq6tECALlQhQNfqoBCgC80RIKzSkMU3R4DilUrsaRQCtJ5ofVGRY7QPKnZ2H9pIiGN1hgBdlWYIcFSlsPsYGyq1ztVDUcnVfBAqvWdxooibKA7doO7a6ph3bSyKvi/929GnEW6El5RTyjvl6iXAACUHYeTCFiIMAAAAAElFTkSuQmCC"></image>
{{title}}
</view>
</view>
</view>
</view>
<view style="height:63px"></view>
</view>
</template>
<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
props:["title"],
components: {
},
data() {
return {
statusBarHeight: statusBarHeight,
}
},
onLoad(options) {
},
created() {
// console.log(this.title)
},
methods: {
//返回上一页
onreturn(){
uni.navigateBack();
}
},
}
</script>
<style lang="scss" scoped>
.mp-header {
background: linear-gradient(-38deg, #fe3a78, #fb3e44);
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 999;
position: fixed;
left: 0;
top: 0;
width: 100%;
.serch-box{
width: 100%;
height: 120rpx;
background-size: 100% 100%;
padding-left: 20rpx;
background: linear-gradient(-38deg, #fe3a78, #fb3e44);
}
.serch-wrapper {
height: 100%;
display: flex;
align-items: center;
// margin-top: 20rpx;
.logo{
font-size: 33rpx;
margin-right: 31rpx;
color: #fff;
display: flex;
align-items: center;
}
image {
width: 18rpx;
height: 33rpx;
margin-right: 15rpx;
}
}
}
</style>
使用：
import Header from '@/components/header/index.vue';
export default {
components: {
Header
},
}
<Header :title="'个人中心'" />
自定义导航样式三
<template>
<view>
<view class="mp-header">
<view class="sys-head" :style="{ height: statusBarHeight }"></view>
<view class="serch-box" style="height: 43px;">
<view class="serch-wrapper flex">
<view class="logo">
<image @tap="onreturn" class="logo_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAzCAYAAACE92h3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUZJREFUeNq82EsKwjAQBuD2mrrTrTdw4cKFINKmrSVK9QZexpsIrnQTp6IgtZk0zfwZmFDQ8DFlaB6pMSYBx4JyRnmjXCctCMzSdAKJVaYnUFhhLBHlNf6EjlYZxfndoDExSVANwaRArrJT9//Iypq+OajKGtu8aJWFgFxlR9f8qJgvWIZiPiBX2cHnLYVi2rcHQrpRj+lw7sdcGuNADqtDvk5RsT4QinVBrkH2Uuvm90EzWCW5K2iHiQV6Uu6k9zztcLGAV8Qmqx3mFvBBuUWAyefja4sCAbq6tECALlQhQNfqoBCgC80RIKzSkMU3R4DilUrsaRQCtJ5ofVGRY7QPKnZ2H9pIiGN1hgBdlWYIcFSlsPsYGyq1ztVDUcnVfBAqvWdxooibKA7doO7a6ph3bSyKvi/929GnEW6El5RTyjvl6iXAACUHYeTCFiIMAAAAAElFTkSuQmCC"></image>
<text class="logo_title">我的客户</text>
<image src="data:image/png;base64,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"
class="customer_add" mode=""></image>
</view>
</view>
</view>
</view>
<view class="mp-header_">
<view :style="{ height: statusBarHeight }"></view>
<view class="serch-box" style="height: 43px;">
</view>
</view>
</view>
</template>
<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
data() {
return {
statusBarHeight:statusBarHeight,
}
},
methods: {
//返回
onreturn(){
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.customer_add{
width: 40rpx;
height: 48rpx;
position: fixed;
right: 48rpx;
}
.mp-header_ {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
background: red;
background: #2C7FFB;
.serch-box{
width: 100%;
height: 120rpx;
background: #2C7FFB;
background-size: 100% 100%;
padding-left: 20rpx;
}
}
.mp-header {
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 999;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: red;
background: #2C7FFB;
.serch-box{
width: 100%;
height: 120rpx;
background: #2C7FFB;
background-size: 100% 100%;
padding-left: 20rpx;
}
.serch-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
// margin-top: 20rpx;
line-height: 86rpx;
.logo{
font-size: 33rpx;
margin-right: 31rpx;
color: #fff;
display: flex;
align-items: center;
.logo_title{
}
}
.logo_img {
width: 18rpx;
height: 33rpx;
position: fixed;
left: 15rpx;
}
}
}
</style>
