微信小程序获取头部导航栏高度

1.获取高度

let res = wx.getSystemInfoSync() ///微信api方法
    let titleH;
    if (res && res['system']) {
        // 判断是否是安卓操作系统 (标题栏苹果为44px,安卓为48px)
      if (res['system'].indexOf('Android') > 0) {
        titleH = 48
      } else {
        titleH = 44
      }
      var height = titleH + res['statusBarHeight'];
      console.log(height, 'height');
      this.setData({
        height: height
      })
    }

2.页面中使用

style="position:fixed;top:{{height}}px"

在这里插入图片描述

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序中可以通过自定义导航栏实现更加个性化的界面设计。以下是一个简单的实现步骤: 1. 在 app.json 文件中设置 "navigationStyle": "custom",表示使用自定义导航栏。 2. 在页面的 WXML 文件中编写自定义导航栏的 HTML 代码,例如: ``` <view class="navbar"> <view class="navbar-title">自定义导航栏</view> </view> ``` 其中,navbar 表示导航栏的样式,navbar-title 表示标题的样式,可以根据需要进行自定义。 3. 在页面的 wxss 文件中设置导航栏的样式,例如: ``` .navbar { height: 44px; background-color: #fff; border-bottom: 1px solid #ccc; display: flex; align-items: center; justify-content: center; } .navbar-title { font-size: 18px; font-weight: bold; color: #000; } ``` 其中,height 表示导航栏高度,background-color 表示导航栏的背景颜色,border-bottom 表示导航栏底部的边框线,display、align-items 和 justify-content 表示导航栏标题的布局方式,navbar-title 表示标题的样式,可以根据需要进行自定义。 4. 在页面的 JS 文件中设置导航栏的返回按钮,例如: ``` wx.showModal({ title: '提示', content: '确认返回上一页?', success: function (res) { if (res.confirm) { wx.navigateBack({ delta: 1 }) } } }) ``` 其中,wx.showModal 表示显示一个模态框,title 表示模态框的标题,content 表示模态框的内容,success 表示点击确定按钮后执行的回调函数,wx.navigateBack 表示返回上一页。 通过以上步骤,就可以实现微信小程序的自定义导航栏
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值