如图所示: 实现自定义导航栏返回按钮，并和微信右侧"胶囊"按钮对齐的效果

一、使用getSystemInfo()获取设备状态栏高度，和使用getMenuButtonBoundingClientRect()获取右侧"胶囊信息"

data() {

       return {

       statusBarh:'', //状态栏高度

       customViewHeight:'', //自定义返回按钮高度

      };

},

wx.getSystemInfo({

     success:res => {

    console.log('设备信息',res)

    this.statusBarh = res.statusBarHeight

}

})

let btn = wx.getMenuButtonBoundingClientRect()

//getSystemInfo获取状态栏信息如下

//getMenuButtonBoundingClientRect()获取"胶囊"按钮信息如下

二、计算自定义返回按钮的高度分析

注意：胶囊顶部btn.top包含了statusBarHeight, 所以 (btn.top-this.statusBarh) 就是胶囊按钮顶部距离状态栏的间距

2.1、整个导航栏的高度 = this.statusBarh + 2 * (btn.top-this.statusBarh) + btn.height

2.2 设置自定义返回按钮顶部top为statusBarh ,固可设置其高度为

this.customViewHeight = 2 * (btn.top-this.statusBarh) + btn.height

三、布局代码如下

微信开发者工具布局

<view class="flex align-center justify-center" @click="navigateBack" style="position: fixed;top: {{statusBarh}}px;height: {{customViewHeight}}px;width: {{statusBarh}}px;background-color: #0081FF;">

    <text class="cuIcon-back text-white"></text>

</view>

HBuilderX、Vue布局

<view class="flex align-center justify-center" @click="navigateBack"

:style="'position: fixed;top: '+ statusBarh + 'px;height: ' + customViewHeight +'px;width: ' + statusBarh + 'px;background-color: ' + '#0081FF;'">

    <text class="cuIcon-back text-white"></text>

</view>