小程序自定义标题栏

在APP.JSON里面设置

  "window": {   
      	"navigationStyle":"custom" 
         },

APP.wxss

.custom { 
 position: fixed; 
  width: 100%;
    top: 0; 
     left: 0; 
    height: 110rpx;  z-index: 999;  text-align: center;   line-height: 110rpx;   border-bottom: 1rpx solid rgb(220,220,220);   background: #ffffff;}
.custom text {  color: rgb(0,0,0);  font-size: 34rpx;  font-weight: 700;  max-width: 280rpx;  line-height: 110rpx;}
.empty_custom {  height: 110rpx;  width: 100%;}
#address{  display: flex;  position: absolute;  /* top: 57rpx; */  left: 20rpx; }#address image{  display: block;  vertical-align: middle;  margin-top: 46rpx;}#address .image_1{  width:23rpx;  height:24rpx;   margin-top: 43rpx;} #address .back_img{     width:30rpx;  height:35rpx;  }#address .image_2{  width:18rpx;  height:10rpx;  margin-top: 54rpx; }#address span{  font-size: 26rpx;  display: inline-block;  color: rgb(51,51,51);  padding: 0 5rpx;}

xhtml

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px;">  <view id='address'>    <image catchtap='back'  class='image_1 back_img' src='../../images/back.png'></image>  </view>  <text style=' line-height: 110rpx;'>职位管理</text></view><view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

app.js

    wx.getSystemInfo({      success: function (res) {        wx.setStorageSync('statusBarHeight', res.statusBarHeight)      }    })