Uniapp-小程序自定义导航栏

一、项目背景

制作小程序页面时候发现原生导航栏有一定的高度是没有背景渲染的会出现这种情况

但是我们需要的是

二、原因

小程序的原生导航栏存在。一般可以使用 纯色填充顶部栏

可以直接使用navigationBarBackgroundColor完成

在style中添加 "navigationBarBackgroundColor": "#FED000"

但是业务需求需要添加自定义的效果,例如一整张背景图纯色填充

三、自定义导航栏的使用

黄色部分为状态栏高度 uni.getSystemInfoSync().statusBarHeight;

红色部分为自定义导航栏高度。wx.getMenuButtonBoundingClientRect

在页面onload时候就可以计算出相关高度了

javascript 复制代码
onLoad() {
    // 状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
    // 胶囊数据
    const { top, height } = wx.getMenuButtonBoundingClientRect();
    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
},
html 复制代码
        <!-- 状态栏高度 -->
        <view :style="{ height: `${statusBarHeight}px` }"></view>
        <!-- 自定义导航栏高度 并 居中 -->
        <view :style="{
          height: `${barHeight}px`,
          'line-height': `${barHeight}px`,
          'text-align': 'center',
        }">
            <text>自定义标题</text>
        </view>
相关推荐
说私域1 小时前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的2 小时前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
玩代码的菜鸟2 小时前
uniapp类似抖音视频滑动
uni-app
2301_805962934 小时前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero4 小时前
微信小程序121~130
微信小程序·小程序
難釋懷4 小时前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~4 小时前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
默魔10 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
阿俊-全栈开发1 天前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
shmily ....1 天前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app