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>
相关推荐
2501_9159090616 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
狂团商城小师妹16 小时前
智尚房产中介小程序
微信小程序·小程序
赵庆明老师17 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj18 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
狂团商城小师妹20 小时前
预约洗车小程序
微信小程序·小程序
future_studio20 小时前
聊聊 Unity(小白专享、C# 小程序 之 图片播放器)
unity·小程序·c#
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
一匹电信狗1 天前
【C++】C++风格的类型转换
服务器·开发语言·c++·leetcode·小程序·stl·visual studio