关于javascript:小程序自定义导航栏中使用粘性布局无效的解决办法

一、引言

最近公司在做一个相似购物商城的小程序我的项目，那就未免要自定义导航栏，然而我发现了一个问题，就是在应用自定义导航栏的页面中再次应用粘性布局是凌乱的，它会粘在屏幕的最下面，这样就会笼罩导航栏的内容。

二、自定义导航栏

如果须要自定义导航栏并且适配所有手机型号就得晓得导航栏的高度，而导航栏的高度是由手机设施状态栏的高度、胶囊的高度、胶囊间隔状态栏的上下边距，这三者之和才是真正的导航栏的高度。至于具体怎么自定义导航栏这里就不再论述，上面附一条怎么自定义导航栏的 GitHub 地址供大家参考浏览。

https://github.com/lingxiaoyi/navigation-bar

三、粘性布局

如果你在小程序中自定义了导航栏，这时候你须要在标签栏中应用粘性布局，不论是应用 Vant UI 组件库中的 sticky 属性或者 van-sticky 组件还是用 CSS 的 position：sticky 属性都无奈达到预期的成果，起因是默认将 top 的值设置为了 0 像素，这就须要将 top 的值设置为导航栏的高度，先来看一张图：

由此可知，导航栏的高度 = 状态栏的高度 + 胶囊的高度 + 胶囊的上下边距 x 2
那么怎么拿到不同型号手机的状态栏高度和胶囊高度以及胶囊的上下边距呢？
状态栏的高度和胶囊信息能够应用微信自定义的办法 wx.getSystemInfo()和 wx.getMenuButtonBoundingClientRect()获取，别离失去如下信息：


由第一张图可知状态栏 (statusBarHeight) 的高度是 44, 由第二张图可知胶囊的高度（height)是 32，top 是胶囊顶部间隔屏幕顶部的间隔，那么胶囊间隔状态栏的上边距就是 top 值减去状态栏的高度，也就是 48 – 44 = 4，那么上下边距加起来就是 4 x 2 = 8, 所以整个导航栏的高度就是：statusBarHeight + height + (top – statusBarHeight) x 2, 即 44 + 32 + (48 – 44) x 2 = 88px
当然不同的手机型号会失去不同的值。

四、具体用法

依据需要如果须要在多个页面中应用就能够在 app.js 中调用以上两种办法并赋值

// 获取零碎信息
    wx.getSystemInfo({
      success: res => {this.system = res}
    })
// 获取胶囊信息
   this.menu = wx.getMenuButtonBoundingClientRect()

而后在具体某个页面的 js 文件中获取值：

// 获取利用实例
const app = getApp();
Page({
    data: {navHeight: ((app.menu.top - app.system.statusBarHeight) * 2 + app.menu.height + app.system.statusBarHeight + 1), // 导航栏高度
    }
})

之后能够在 wxss 文件中设置款式：

.tabs_title{
    position: sticky;
    z-index: 99999;
}

top 值在 wxml 中用模板语法绑定：

    <view class="tabs_title" style="top: {{navHeight}}px">
        <scroll-view scroll-x="true">
           ......
        </scroll-view>
    </view>

功败垂成，这样既能够在微信小程序中应用自定义导航栏也能够应用粘性布局了。大家也能够自行封装组件以备在多个页面中用到或者日后应用。