小程序自定义导航栏，胶囊对齐解决方案

最新推荐文章于 2025-10-06 12:04:30 发布

原创最新推荐文章于 2025-10-06 12:04:30 发布 · 1.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序自定义导航栏，胶囊对齐 #小程序胶囊对齐解决方案 #小程序胶囊对齐 #微信小程序胶囊对齐

本文介绍了如何在小程序中获取状态栏、胶囊及导航栏的高度，并以px为单位进行计算，确保在不同设备上布局的一致性。通过调整wxml中的样式，实现图片的顶部间距和高度与导航栏匹配。同时，讨论了rpx单位在不同设备间转换可能导致的精度问题。

小程序胶囊高度组成

在这里插入图片描述

获取小程序状态栏，胶囊，导航栏高度

  //  获取状态栏信息
  getMenuButtonBound() {
    let stateHeight = 0; //  接收状态栏高度
    const navHeight = wx.getMenuButtonBoundingClientRect().height; //  获取胶囊高度
    let top = 0;
    wx.getSystemInfo({
      success(res) {
        stateHeight = res.statusBarHeight;
      },
    });
    top = wx.getMenuButtonBoundingClientRect().top - stateHeight; //  获取top值
    console.log('navHeight', navHeight);
    console.log('top', top);
    this.setData({
      // navHeight: navHeight + top * 2, //  导航栏高度
      navHeight, //  导航栏高度
      stateHeight: stateHeight + top, //  状态栏高度
    });
  },

这个获取单位是px，之前换算的rpx，不同设备对rpx换算的比率不一样，导致高度有偏差

wxml代码

      <image class="backgroundtopimage" style="  margin-top: {{stateHeight}}px;  height: {{navHeight}}px;line-height: {{navHeight}}px;text-align: center; " src="/images/logotitle.jpg" />