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

效果

image.png

一 、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,
        })
      },
   })
}
posted @ 2023-03-14 21:02  杨芋可可  阅读(162)  评论(0编辑  收藏  举报