小程序顶部栏自定义的主要解决的问题是适配不同的机型 顶部栏含有顶部标题栏+状态栏。标题栏高度为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;
}