一，代码：
说明：我们使整个顶部导航栏透明，只保留一个退回上一页的按钮
模板
<!-- 自定义导航栏 -->
<view class="navBarBox" style="position: fixed;top:0;z-index: 1000;">
<!-- 状态栏占位 -->
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
<!-- 导航栏内容 -->
<view class="navBar" style="height:93rpx;">
<view style="width:93rpx;height:93rpx;margin-left: 20rpx;display: flex;
flex-direction: row;justify-content: center;align-items: center;" @click="goBack">
<!-- 返回上一页-->
<uni-icons type="back" size="30"></uni-icons>
</view>
</view>
</view>
js：
export default {
data() {
return {// 状态栏高度
statusBarHeight: 0,
// 导航栏高度
navBarHeight: 82+11,
}
},
onl oad(option) {
//获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
},
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
二，查看效果
web:
微信小程序:
三，查看hbuilderx的版本:
标签：自定义,导航,app,statusBarHeight,3.7,https,uni,com,hbuilderx
From： https://www.cnblogs.com/architectforest/p/17152779.html