微信小程序自定义导航栏，自适应手机屏幕高度（计算微信小程序默认胶囊高度）

微信小程序自定义导航栏，自适应手机屏幕高度（计算微信小程序默认胶囊高度）

小编最近遇到了一个需求，要取消掉微信小程序自带的导航栏，然后放一张纯色背景（非白色），然后下滑一段时间后要求变成白色。刚开始做的时候以为没啥难度，使用的是固定高度，做出来一测，不同手机屏幕高度不同，导航栏高度也是不统一的，直接没眼看了 *-*。然后就各种各种找度娘，然并卵！最后在我们一个前端大神的指导下知道了该怎么做，现在分享出来给大家提供参考。

1、首先在要自定义的页面中的中加上，"navigationStyle": "custom" 隐藏微信小程序原生导航栏。

2、调用微信api获取手机系统屏幕高度和导航栏高度

getTopHeight:function(){
    //获取胶囊位置信息
    let menuButtonObject = ();
    //定义导航位置参数
    var globalData={
      navHeight:0,
      navTop:0,
      windowHeight:0,
      ww:0,
      hh:0,
    }
    var navTop;
    var navHeight;
    //获取手机系统信息
    ({
      success: res => {
        //导航高度
        var statusBarHeight = ;
        navTop = ;
        navHeight = statusBarHeight +  + ( - statusBarHeight) * 2;
         = navHeight;
         = navTop;
         = ;
        //可视窗口宽度
        var ww = ;
        //可视窗口高度
        var hh = ;
         = ww;
         = hh;
        (globalData)
        //这是我自定义的返回图标位置高度 21单位是 rpx,是图标高度的一半，图标高度为48rpx
        var backHeight=(navTop*2+(navHeight-navTop))-21;
        ({
          globalData:globalData,
          backHeight:backHeight
        })
      },
      fail(err) {
        (err);
      }
    })
}

3、这里是wxml中的内容

<view class="bg-img">
  <image src="img/" class='img'></image>
</view>
<image src="img/" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image>
<!-- 自定义导航 高度单位 rpx ,这里+4 是因为样式美观，你喜欢加多少都行，hidden这个参数在下面的方法中获取-->
<view class="top-view" style="height:{{(*2)+4}}rpx" hidden="{{hidden}}">
  <image src="img/" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image>
</view>

4、监听页面滑动高度

/**
   * 监听页面滑动事件
   * @param {} e 
   */
  onPageScroll:function(e){
    // 是页面滑动的实时高度
    ()
    var that=this;
    //这里390是我顶部导航栏背景图片的高度 height 则是计算出来背景图片隐藏的高度
    var height=(390-(*2)+4)/2;
    (height)
    if(parseInt()>height){
      ({
        hidden:false
      })
    }else{
      ({
        hidden:true
      })
    }
  },

至此，自定义导航栏完成，觉得有用的道友点个赞，如果有更好的方法，欢迎交流欢迎分享！