zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

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

App 自定义 导航 uni 顶部 3.7 HBuilderX
2023-09-14 09:01:15 时间

一,代码:

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

模板

<!-- 自定义导航栏 -->
        <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://www.cnblogs.com/architectforest

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

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

二,查看效果

web:

 

 微信小程序:

三,查看hbuilderx的版本: