支付宝小程序 | 自定义标题导航栏

效果

一 、page.json

"transparentTitle": "always"

二、page.axml

<view class="custom-navigation" style="height:{{systemInfo.statusBarHeight+systemInfo.titleBarHeight+100}}px">
</view>

三、page.less

.custom-navigation {
  background: url(/assets/images/navigation-bg.png);
  background-size: 100% 100%;
}

四、page.ts

data:{
 systemInfo: {},
}

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