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

苏苏哇哈哈

已于 2022-11-16 15:14:09 修改

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 小程序文章标签：前端支付宝小程序

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

本文链接：https://blog.youkuaiyun.com/qq_48085286/article/details/121111389

css 同时被 2 个专栏收录

62 篇文章

订阅专栏

小程序

52 篇文章

订阅专栏

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

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

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

关注博主即可阅读全文