小程序头部导航栏添加图片背景

原理: 通过将原来的头禁用，页面自然而然的就会顶上去，然后封装一个导航栏的组件
这里是用uniapp开发的
下面是效果图:

1615361687(1).jpg

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;base64,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l6BAAADAJSgQAABwCQoEAABcggIBAACXoEAAAMAlKBAAAHAJCgQAAFyCAgEAAJegQAAAwCUesgPUNd7Le3lvdXVdrU+sF+vF+qeeUiqUCqVCVWVv/033L/oX/SswsK5W11DfTzFGjBFjHnywrtbHG3kjb7z/fmWXskvZNXu27O2/6fzIj/weeogyKIMyan91IkEkiITqavob/Y3+Jnvj647bFYiwC7uwnznDxMR1sD7uy32578CB2ivnf8FVeD9vkhRKoZR779U+B1Onyo5T3/EJPsEnTp+WnaOuud0pLO0D437/0ABQe0R/0V/0d7/9itsViFgmlollBw/KzgEADQef4lN8yv32K+5XII1FY9E4J4dUUkkVQnYeAKjHftmPVGVVZVVl5eXJjlPX3K5A7MX2Ynvxd9+JAWKAGFBWJjsPANRjVrKS1W4vSy9LL0s/dUp2nLrmdgVSs+HphnRD+ty5snMAQD22gBbQgjlzZMeQpS5uRNIxg0G5oFxQLlgs3I27cbeQENmJAKAemE7TaXpZmXWgdaB1oKJoCx0O2bHqmtsegWgcDoPRYDQYn3+eTGQi05UrshMBgI7FURzFXb4sFoqFYmFsrLbQ/YrDyc2PQP6Xqqqqqo4erb1aulR2HgDQIUGCxPjxVpvVZrV98IHsOLIZZQfQi/Ly8vLy8rIy/yT/JP+k6mrtD6V7dyqncipnFC2AO/rlLisxTUwT01591TbLNss2KzVVdiy9wI7xD6iKqqiK2aw9eeg8IvHxkZ0LAGqfSBNpIu3SJRpAA2jA+PG2CluFrWL5ctm59MbNr4H8Me0QNTOTH+aH+eGOHWkezaN57nefN4A7EbkiV+SuX2+0GC1Gi8mE4vjPcATyF6lCFaro1k2cEqfEqQkT6Bgdo2O9enECJ3DCHXfIzgcAf05sF9vF9n//m8M5nMPz83kpL+WlixZZ2lnaWdpt2SI7X32BArlBZrPZbDYbjUcOHzl85LDJpC1t04b+i/6L/qtlS5pNs2n2nXeKJWKJWOLlJTsvgDvgMTyGx1y5Qq/QK/TKmTMUSIEUWF5OY2ksjT1xIuC+gPsC7rNYMjMzMzMz6250bgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC4Of4/a6OjMQxqLmoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMzBUMTQ6MDU6MDkrMDg6MDDJlrTNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTMwVDE0OjA1OjA5KzA4OjAwuMsMcQAAAEd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fMW9iaGwwZDAyOTUvaG9tZS5zdmfEnSvGAAAAAElFTkSuQmCC);
  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"

最后编辑于：2021.03.22 16:54:38

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 162,825评论 4赞 377
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 68,887评论 2赞 308
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 112,425评论 0赞 255
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,801评论 0赞 224
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 53,252评论 3赞 299
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 41,089评论 1赞 226
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 32,216评论 2赞 322
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 31,005评论 0赞 215
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,747评论 1赞 250
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,883评论 2赞 255
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,354评论 1赞 265
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,694评论 3赞 265
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,406评论 3赞 246
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,222评论 0赞 9
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,996评论 0赞 201
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 36,242评论 2赞 287
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 36,017评论 2赞 281

小程序头部导航栏添加图片背景

1.pages.json配置

2.封装组件

推荐阅读更多精彩内容