Uniapp-小程序自定义导航栏

最新推荐文章于 2025-05-09 15:22:06 发布

一路向前的月光

最新推荐文章于 2025-05-09 15:22:06 发布

阅读量1.9k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： uniapp vue 文章标签： uni-app 小程序

本文链接：https://blog.youkuaiyun.com/a99101/article/details/134412306

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

uniapp

13 篇文章

订阅专栏

本文介绍了在微信小程序开发中如何处理原生导航栏背景问题，包括使用`navigationBarBackgroundColor`设置纯色，以及如何计算和自定义导航栏的高度，以满足业务需求，如添加背景图和居中文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、项目背景

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

但是我们需要的是

二、原因

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

可以直接使用navigationBarBackgroundColor完成

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

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

三、自定义导航栏的使用

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

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

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

onLoad() {
    // 状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
    // 胶囊数据
    const { top, height } = wx.getMenuButtonBoundingClientRect();
    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
},

        <!-- 状态栏高度 -->
        <view :style="{ height: `${statusBarHeight}px` }"></view>
        <!-- 自定义导航栏高度 并 居中 -->
        <view :style="{
          height: `${barHeight}px`,
          'line-height': `${barHeight}px`,
          'text-align': 'center',
        }">
            <text>自定义标题</text>
        </view>