如图所示: 实现自定义导航栏返回按钮，并和微信右侧"胶囊"按钮对齐的效果
一、使用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>
