微信小程序自定义顶部栏背景图

小程序顶部栏自定义的主要解决的问题是适配不同的机型  顶部栏含有顶部标题栏+状态栏。标题栏高度为44px，状态栏根据不同的机型（也就是刘海最大区别）分为无刘海 20px，有刘海是40px

1.首先在app.js中全局定义获取状态栏的高度：

globalData：{

statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],

}；

2.wxml：

<!-- 顶部 -->

<view class="topbar" style="padding-top:{{statusBarHeight}}px">

<!-- <view class="arrow-box row">

<image src="../images/wode_bg_01.png"></image>

</view> -->

<image class='bg' data-id="{{item.deviceId}}" src="../images/wode_bg_01.png" catchtap='navmap'></image>

<view class="input-box row">

我的

</view>

</view>

<view class="top-comend" style="padding-top:{{statusBarHeight}}px"></view>

<!-- 顶部end -->

 

3.在xx.json中定义：

"navigationStyle": "custom"

4.在xx.js中：

const app = getApp();

page（{

data：{

statusBarHeight: app.globalData.statusBarHeight,//自定义顶部栏高度

}

}）

 

5.xx.wxss

/* 自定义导航 */

.bg{

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

z-index: -1;

}

.topbar {

width: 100%;

height: 45px;

/* background-color: pink; */

position: fixed;

top: 0;

left: 0;

z-index: 999;

}

.row {

display: flex;

justify-content: center;

align-items: center;

}

.arrow-box {

width: 10%;

height: 100%;

/* background-color: #fe6969; */

float: left;

}

.arrow-box image {

width: 14px;

height: 16px;

transform: rotateY(180deg);

}

.input-box {

width: 100%;

height: 100%;

/* background-color: #eee; */

justify-content: center;

align-items: center;

float: left;

/* margin-left: 3%; */

text-align: center;

color: #fff;

}

.input-box input {

font-size: 12px;

color: #333;

width: 93%;

height: 30px;

background-color: #f2f2f2;

border-radius: 44rpx;

padding-left: 7%;

}

.top-comend {

width: 100%;

height: 45px;

}