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

原创已于 2022-11-16 15:14:09 修改 · 4.5k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #支付宝小程序

于 2021-11-03 09:19:40 首次发布

css 同时被 2 个专栏收录

62 篇文章

订阅专栏

小程序

52 篇文章

订阅专栏

本文介绍了一种在移动端应用中通过编程方式获取设备系统信息的方法，并展示了如何利用这些信息来自定义应用的状态栏及标题栏高度，以实现更好的视觉效果。

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

关注博主即可阅读全文