支付宝小程序实现自定义头部导航栏

1.实现效果

2.实现原理

获取手机信息：

onLoad(query) {
 this.getSystemInfo()
},
getSystemInfo() {
  my.getSystemInfo({
    success: (res) => {
      this.setData({
        systemInfo: res
      })
    }
  })
},

statusBarHeight:状态栏高度
titleBarHeight：标题栏高度

3.实现代码

在json中设置

{
  "transparentTitle": "always"
}

关键代码

  <view class="custom_title flex-row" style="height:{{systemInfo.titleBarHeight}}px;padding-top:{{systemInfo.statusBarHeight}}px;" >hi，12312312312312~</view>

data: {
 systemInfo: {},
}
onLoad(query) {
 this.getSystemInfo()
},
getSystemInfo() {
  my.getSystemInfo({
    success: (res) => {
      this.setData({
        systemInfo: res
      })
    }
  })
},