1、获取胶囊的信息

let menuButtonObject = wx.getMenuButtonBoundingClientRect();

width:胶囊的宽度；
height：胶囊的高度
top:胶囊距离顶部的距离

APP.js完整代码

// app.js
App({
      globalData:{
        navHeight: "", //导航栏高度
        navTop: "", //导航栏距顶部距离
        navObj: "", //胶囊的高度
        navObjWid: "", //胶囊宽度+距右距离
      },
      onLaunch(){
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
            success: res => {
                //导航高度
                let statusBarHeight = res.statusBarHeight,
                navTop = menuButtonObject.top,
                navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
                navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
                this.globalData.navHeight = navHeight; //导航栏总体高度
                this.globalData.navTop = navTop; //胶囊距离顶部距离
                this.globalData.navObj = menuButtonObject.height; //胶囊高度
                this.globalData.navObjWid = navObjWid; //胶囊宽度(包括右边距离)
                // console.log(navHeight,navTop,menuButtonObject.height,navObjWid)
            },
            fail(err) {
                console.log(err);
            }
        })
      }

})

 

二、拿到相应的导航栏信息

navHeight: app.globalData.navHeight, //导航栏高度
navTop: app.globalData.navTop, //导航栏距顶部距离
navObj: app.globalData.navObj, //胶囊的高度
navObjWid: app.globalData.navObjWid, //胶囊宽度+距右距离

index.js

// index.js
const app = getApp();
Page({
    data:{
        navHeight: app.globalData.navHeight, //导航栏高度
        navTop: app.globalData.navTop, //导航栏距顶部距离
        navObj: app.globalData.navObj, //胶囊的高度
        navObjWid: app.globalData.navObjWid, //胶囊宽度+距右距离
    }
})

 

三、自定义导航栏内容

index.wxml

<!-- 导航栏 -->
<view class="custom_head" style="height:{{navHeight}}px;">
  <view class="flex-row j_b" style="height:{{navObj}}px;padding-top:{{navTop}}px;padding-right:{{navObjWid+5}}px;">
    <view class="head_store text_ellipsis">{{store_name}}</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{storeList}}" range-key="name">
      <view class="flex-row picker">
        <text style="margin-right: -{{navObjWid+5}}px;">天府健康通</text>
      </view>
    </picker>
  </view>
</view>

index.wxss 

.custom_head {
    width: 750rpx;
    color: #fff;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  
  .head_store {
    font-size: 30rpx;
    font-weight: bold;
    width: 340rpx;
    margin-right: 30rpx;
    margin-left: 22rpx;
    flex-shrink: 0;
  }
  
  picker {
    flex-shrink: 0;
  }
  
  .picker {
    font-size: 28rpx;
    text-align: center;
    font-size: 35rpx;
  }