支付宝小程序 | 自定义标题导航栏
效果
一 、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,
})
},
})
}