小程序，单页面自定义导航栏---my页面

my.xml

   <view class="custom"style="padding-top:{{statusBarHeight}};">
       <navigatorclass="vipcode"url="../qrcode/qrcode"role="navigation">
        <imagesrc="../../images/erweima.jpg"></image>
      <textstyle="font-size: 12px;">
     会员码
     </text> 
     </navigator>
</view>

my.js

  const app = getApp();
  data: {
  		statusBarHeight: app.globalData.statusBarHeight,//我这里使用得是全局定义变量,方便用于多个页面使用
  }

my.json
{
“navigationStyle”:“custom”,
}

app.js

globalData: {
 	statusBarHeight:wx.getSystemInfoSync()['statusBarHeight'] //获取胶囊具体顶部的距离，兼容所有尺寸屏幕

}

效果图