小程序自定义导航栏对齐，获取状态栏及胶囊信息

首先上效果图：

实现思路：

1. 去掉小程序原生顶部导航栏，这个很简单，在pages里面设置"navigationStyle": "custom"即可

2. 自定义实现导航栏，并与小程序胶囊位置对齐。那么问题来了，如何对齐胶囊？？?

 我们利用一段代码来调试一下小程序导航栏和手机状态栏之间的位置关系

<view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px'}"></view>
<view class="nav-bar-placeholder" :style="{height: navBarHeight + 'px'}"></view>

//获取状态栏高度
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
//获取小程序胶囊信息
const menu = wx.getMenuButtonBoundingClientRect()
//计算获得导航栏高度（此处为重点!!!）
const navBarHeight = (menu.top - statusBarHeight) * 2 + menu.height
this.statusBarHeight = statusBarHeight
this.navBarHeight = navBarHeight

结果图：

 

 其实这里已经告诉你答案了：导航栏的高度 = （胶囊距顶部距离 - 状态栏高度）* 2 + 胶囊高度

我们给自定义导航栏设置fixed固定定位，top设置为状态栏高度，height设置为导航栏高度；盒子设置为flex布局，很容易实现和内容和胶囊对齐，奥利给！

完整代码如下：

<view class="serch-bar" :style="{ top: statusBarHeight + 'px', height: navBarHeight + 'px' }">
    <uni-icons type="list" size="24" color="red" class="logo"></uni-icons>
    <SearchBar></SearchBar>
</view>

<script>
export default {
    data(){
        return {
            statusBarHeight: 0,
            navBarHeight:0,
        }
    },
    onLoad(){
        //获取状态栏高度
        const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
        //获取小程序胶囊信息
        const menu = wx.getMenuButtonBoundingClientRect()
        //计算获得导航栏高度（此处为重点!!!）
        const navBarHeight = (menu.top - statusBarHeight) * 2 + menu.height
        this.statusBarHeight = statusBarHeight
        this.navBarHeight = navBarHeight
    },
}
</script>

<style scoped lang="scss">
.serch-bar {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 10px;
    z-index: 100;

    .logo {
        margin-right: 8px;
    }
}
</style>