小程序返回按钮，兼容所有机型的高度办法

清风细雨_林木木2025-04-20 20:32

现象

在使用返回按钮的时候在不同机型上返回按钮小图标位置总是不一样，一会高一会低。

原因

因为手机的状态栏一般是不一样的，导致设置固定高度的时候就随时在改变。

解决办法

直接获取胶囊按钮的top值和height值
将返回按钮的top值设置为一样的，将图标按钮高度设置一样的，注意宽度尽量大一点，防止图片失真。

实例代码

page.wxml

html 复制代码

<navigator open-type="navigateBack" class="back-button" 
           style="top: {{navTop}}px; height: {{navHeight}}px;" bindtap="goBack">
  <image src="https://serve.zimeinew.com/images/back.png" mode="aspectFit" />
</navigator>

属性 / 元素	作用说明
`navigator`	用于页面跳转组件。
`open-type="navigateBack"`	表示"返回上一页"。
`class="back-button"`	给返回按钮设置样式。
`bindtap="goBack"`	绑定点击事件 `goBack` 方法。
`<image ... />`	返回按钮的图标。
`mode="aspectFit"`	控制图片显示的模式。aspectFit 表示：保持原始宽高比缩放图片。

css 复制代码

.back-button {
  position: fixed;
  left: 20rpx;
  top: 75rpx;
  width: 70rpx;
  height: 70rpx;
  z-index: 999;
}

.back-button image{
  width: 100%;
  height: 100%;
  /* object-fit: contain; 保证图片完整显示且不变形 */
}

javascript 复制代码

Component({
  properties: {},
  data: {
    navTop: 0,
    navHeight: 0
  },
  lifetimes: {
    attached() {
      this.getNavHeight();
    }
  },
  methods: {
    getNavHeight() {
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 获取胶囊按钮信息
      const navTop = menuButtonInfo.top; // 胶囊按钮顶部坐标
      const navHeight = menuButtonInfo.height; // 胶囊按钮右侧坐标

      this.setData({
        navTop: navTop,
        navHeight: navHeight
      });
    }
  }
});

总结

返回按钮Top和Height与胶囊属性相同。

扩展

不同设备的状态栏属性

获取胶囊按钮信息

javascript 复制代码

const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 获取胶囊按钮信息
console.log(menuButtonInfo)

获取设备信息，获取设备状态栏高度

javascript 复制代码

const systemInfo = wx.getSystemInfoSync(); // 获取系统信息
const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
console.log(systemInfo)
console.log(statusBarHeight)