微信小程序自定义导航栏【超详细】

能跑就算成功2023-12-07 15:04

前言

开发过程中，总会遇到ui给出的风格迥异的导航栏。比如：导航栏背景颜色渐变、导航栏背景是图片，等等。如果只用微信提供的navigationBarBackgroundColor肯定无法满足这些需求，因为它只能设置16进制的颜色，所以我们需要自定义导航栏，从而满足这些需求。

知识点

wx.getMenuButtonBoundingClientRect()

自定义导航栏我们一定要认识到这个方法，它可以获取菜单按钮（右上角胶囊按钮）的布局位置信息，通过该方法提供的信息，我们就能完美兼容不同屏幕的导航栏。

这是getMenuButtonBoundingClientRect所获取到的数据，咋一看不好理解，所以我给出了下面这张图，以下图解就很清楚了

步骤

page.json 局部设置中取消自带的导航栏

json 复制代码

"navigationStyle": "custom"

onLoad() 生命函数中获取胶囊信息，并通过胶囊信息设置自定义导航栏样式

js 复制代码

onLoad() {
    const {
        width,
        height,
        top,
        bottom,
        left,
        right
    } = wx.getMenuButtonBoundingClientRect();
    
    this.setData({
        tapNavSty: `height: ${bottom}px`
    });
}

样式文件中，设置导航栏容器的基本样式

wxss 复制代码

.top-nav-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: linear-gradient(to bottom right, blue, pink);
}

模板文件中，绑定动态获取的导航栏高度

wxml 复制代码

<view class="top-nav-box" :style="topNavSty">

</view>

这样就得到自定义的导航栏效果啦

总结

理解getMenuButtonBoundingClientRect获取的胶囊信息，并且取消自带的导航栏，最终设置自定义导航栏，设置导航栏容器的基本样式时不仅仅可以设背景色，还是设置背景图片，从而满足设计需求啦