微信小程序自定义头部自适应手机屏幕的简单方法

最新推荐文章于 2025-12-02 15:04:31 发布

原创

最新推荐文章于 2025-12-02 15:04:31 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

我的需求效果如下

在这里插入图片描述

我的思路是：

1.整个导航栏拆开分为两部分一部分是时间、信号灯状态栏部分第二部分就是除状态栏的下面部分
2.求出导航栏整体高度
3. 然后时间、电量等状态栏的高度再一减就得出下面高度

代码部分

//app.js
App({
   
   
  globalData: {
   
   
     //全局数据管理
     navBarHeight: 0, // 导航栏整体高度
     ztlHeight:0,//顶部时间状态栏的高度
     customTitleHeight:0//自定义导航栏的高度
  },
    calcNavBarInfo(){
   
   
          // 获取系统信息
          const systemInfo = wx.getSystemInfoSync();
          //获取最上面的时间状态栏的高度
          const ztLanHeight=wx.getSystemInfoSync().statusBarHeight;
          this.globalData.ztlHeight