目录

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>
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
sunly_24 分钟前
uniapp:微信小程序,一键获取手机号
微信小程序·小程序·uni-app
JIngJaneIL2 小时前
健身管理小程序|基于java微信开发健身管理小程序的系统设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·毕业设计·论文·健身管理小程序
Kx…………10 小时前
Day2:前端项目uniapp壁纸实战
前端·学习·uni-app·实战·项目
高山流水&上善10 小时前
uniapp地图导航及后台百度地图回显(v2/v3版本)
uni-app
Z编程12 小时前
uniapp微信小程序引入vant组件库
微信小程序·小程序·uni-app
web_Hsir14 小时前
vue + uniapp 实现仿百度地图/高德地图/美团/支付宝 滑动面板 纯css 实现
css·vue.js·uni-app
qq_3168377515 小时前
uniapp 打包 H5 向 打包的APP 使用 @dcloudio/uni-webview-js 传值
开发语言·javascript·uni-app
凡科网小帆17 小时前
博物馆小程序怎么做?从0到1打造数字化文化窗口
小程序·小程序制作
WeiAreYoung19 小时前
uni-app ucharts自定义换行tooltips
uni-app
搬砖-无恙20 小时前
vue+uniapp 获取上一页直接传递的参数
前端·vue.js·uni-app