Uniapp-小程序自定义导航栏

• 移动开发

一、项目背景

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

Uniapp-小程序自定义导航栏

但是我们需要的是

Uniapp-小程序自定义导航栏

二、原因

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

可以直接使用navigationBarBackgroundColor完成

在style中添加 “navigationBarBackgroundColor”: “#FED000”

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

三、自定义导航栏的使用

Uniapp-小程序自定义导航栏

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

Uniapp-小程序自定义导航栏

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

Uniapp-小程序自定义导航栏

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

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/b9be1a4ab9.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐