小程序自定义导航栏跟胶囊位置调整

*小程序自定义导航栏跟胶囊位置调整

在`.app.js中设置

onLaunch{
   // 屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        let clientHeight = res.windowHeight;
        let clientWidth = res.windowWidth;
        let changeHeight = 750 / clientWidth;
        let height = clientHeight * changeHeight;
         that.globalData.height = height;
        that.globalData.systeminfo = res;
        //状态栏的高度，单位px
        that.globalData.statusBarHeight = res.statusBarHeight;      
      }
    });
    // 获得胶囊按钮位置信息
    that.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect();
}

index.js

```javascript

// 现胶囊位置信息
navbarBtn: { 
  height: app.globalData.headerBtnPosi.height,
  width: app.globalData.headerBtnPosi.width,
  // 胶囊top - 状态栏高度
  top: app.globalData.headerBtnPosi.top - app.globalData.systeminfo.statusBarHeight,
  // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
  bottom: app.globalData.headerBtnPosi.bottom - app.globalData.headerBtnPosi.height - app.globalData.systeminfo.statusBarHeight,
  // 屏幕宽度 - 胶囊right
  right: app.globalData.systeminfo.screenWidth - app.globalData.headerBtnPosi.right
},
statusBarHeight: app.globalData.systeminfo.statusBarHeight,
navbarHeight:'0',

``
index.html

<view style="height:{{navbarHeight}}px;">
</view>
<page>
  <!-- 自定义导航栏 -->
  <!-- 状态栏 -->
  <view class='navbar-wrap' style='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;'>
  <!--  -32 -->
    <view class="navbar-text" style='line-height:{{navbarBtn.height + navbarBtn.top}}px;'>
      订单详情   </view>
  
  <!-- + 2   left:{{navbarBtn.right}}px;-->
    <view class="navbar-icon" bindtap="navigationBotton" data-orderStatus='{{orderInfo.status}}' style="top:{{navbarBtn.top + statusBarHeight }}px;height:{{navbarBtn.height}}px;">
    <!-- width:9px; -->
      <image src="/image/return2.svg" style="float:left;height:16px"></image>
      </view>
  </view>
  </page>

index.css

.navbar-wrap{
position: fixed;
width: 100%;
top: 0;
z--index:999999;
/* background-color: #3281FF; */
box-sizing: border-box;
}
 
.navbar-text {
text-align: center;
font-size: 36rpx;
color: #222222;
font-weight: 600;
}
 
.navbar-icon {
position: fixed;
display: flex;
border-radius: 64rpx;
/* border: 0.5px solid rgba(102,102,102, 0.3); */
box-sizing: border-box;
}
 
.navbar-icon image {
  width: 40px;
  height: 40px;
/* padding: 6px 5px 5px; */
display: inline-block;
overflow:hidden;
padding-top: 7px;
padding-left: 6px;
padding-right: 7px;

}
 
.navbar-icon view {
height: 18px;
border-left: 0.5px solid rgba(255,255,255, 0.3);
margin-top: 6px;
}
 
.navbar-loading{
background: #fff;
text-align: center;
}

以上就是小程序自定义导航栏的步骤了，先获取系统屏幕高度然后再进行设置。