顶部导航适配小程序方案

一、小程序导航栏与状态栏重叠问题

当我们自定义导航栏之后再小程序当中会出现导航栏与状态栏重叠的现象，如图所示：

问题代码如下：

解决方案如下：
我们只需要用一个元素占用导航栏的位置就可以解决这一问题

这样虽然解决了这问题但，此状态栏在不同设备上高度不一定相同，此处我们将高度写死了，无法达到自适应的效果
改进方案如下：
我们可以通过uni-app的aip来获取状态栏高度动态赋值给占用元素，计算代码如下：

export default {
        name: "navBar",
        data() {
            return {
                statusBarHeight: 20
            }
        },
        methods: {
        },
        created() {
            try{
                let  res=  uni.getSystemInfoSync()
                this.statusBarHeight = res.statusBarHeight
            }catch(e){
                console.log(e)
            }
        }
    }

改善后效果：

二、导航栏与小程序右侧胶囊重叠问题

首先在不同设备上胶囊大小可能不相同，所以我们需要通过计算去赋值导航栏高度，使其与胶囊在任何设备上高度都相同，我们先思考导航栏高度应该怎么计算：

我们可以看出导航栏高度应该是由：胶囊顶部红色框高度+胶囊高度+胶囊底部红色框高度
这里我们可以使用uni-app的api来获取胶囊的位置信息，这是api官网链接：小程序胶囊信息api

通过官网介绍我们可以知道该api时不支持app、h5、支付宝小程序的，所以我们需要用到条件编译，
经过分析我们可以得出导航栏计算公式为：（胶囊底部高低 - 状态栏高度）+（胶囊顶部高度 - 状态栏高度）
计算代码如下：

export default {
        name: "navBar",
        data() {
            return {
                statusBarHeight: 20,
                navHeight: 45,
                winWidth: '100%'
            }
        },
        created() {
            try{
                let  res=  uni.getSystemInfoSync()
                this.statusBarHeight = res.statusBarHeight
                // #ifndef H5 || APP-PLUS || MP-ALIPAY
                let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
                let navHeight = (menuButtonInfo.bottom - res.statusBarHeight) + (menuButtonInfo.top - res.statusBarHeight)
                this.navHeight = navHeight + 5 //此处可能与设备存在一些差异，需要加5像素才能匹配
                this.winWidth = menuButtonInfo.left + 'px'
                // #endif
            }catch(e){
                console.log(e)
            }
        }
    }

结构代码如下：

最终效果：微信小程序中

H5中

总结

到此为止顶部导航栏适配就结束啦！！在不同的运行环境中api的支持程度会有差异，也会存在一些视图上的差异，对此我们应该尽量考虑周全，做到更好的适配，uni-app的条件编译还是很nice的，不需要我们去写太多的适配代码。