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

原创于 2023-03-14 21:01:49 发布 · 933 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

该文介绍如何在页面配置(page.json)中设置透明标题，并在page.axml中通过获取systemInfo动态设置导航栏高度，同时在page.less中设定背景图片。在page.ts中使用onLoad方法获取系统信息以实现适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

一、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,
        })
      },
   })
}