uni-app:自定义顶部导航栏(hbuilderx 3.7.3)

一，代码：

说明：我们使整个顶部导航栏透明，只保留一个退回上一页的按钮

模板

<!-- 自定义导航栏 -->
        <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,
            }
        },
        onLoad(option) {
                 //获取手机状态栏高度
                 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
        },

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-zi-ding-yi-ding-bu-dao-hang-lan-hbuilderx-3-7-3/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，查看效果

web:

 

 微信小程序:

三，查看hbuilderx的版本: