1.實(shí)現(xiàn)效果

在這里插入圖片描述

2.實(shí)現(xiàn)原理

2.1獲取膠囊的詳細(xì)信息

在這里插入圖片描述

let menuButtonObject = wx.getMenuButtonBoundingClientRect();

在這里插入圖片描述

width:膠囊的寬度；
height：膠囊的高度
top:膠囊距離頂部的距離

2.2獲取導(dǎo)航欄的整體高度

在這里插入圖片描述

wx.getSystemInfo({
   success: res => {
    let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top,
    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
   }
})

整體高度：
狀態(tài)欄高度+膠囊高度+(膠囊距離-膠囊高度）*2

    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;

2.3獲取膠囊距離右邊的距離

在這里插入圖片描述

res.windowWidth - menuButtonObject.right

2.4完整獲取代碼：

let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
   success: res => {
     //導(dǎo)航高度
     let statusBarHeight = res.statusBarHeight,
       navTop = menuButtonObject.top,
       navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 膠囊按鈕與右側(cè)的距離 = windowWidth - right+膠囊寬度
       navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
     this.globalData.navHeight = navHeight; //導(dǎo)航欄總體高度
     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);
   }
 })

3.代碼實(shí)現(xiàn)

在json文件中定義custom，自定義導(dǎo)航欄樣式.

{
  "usingComponents": {},
  "navigationBarTitleText": "導(dǎo)航欄自定義~",
  "navigationStyle":"custom"
}

拿到相應(yīng)的導(dǎo)航欄信息

navHeight: app.globalData.navHeight, //導(dǎo)航欄高度
navTop: app.globalData.navTop, //導(dǎo)航欄距頂部距離
navObj: app.globalData.navObj, //膠囊的高度
navObjWid: app.globalData.navObjWid, //膠囊寬度+距右距離

在這里插入圖片描述

自定義導(dǎo)航欄的樣式，設(shè)置fixed布局

<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>切換名稱(chēng)</text>
        <image src="/img/down_arr.png" />
      </view>
    </picker>
  </view>
</view>

.custom_head {
  width: 750rpx;
  background: #7ED1AC;
  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;
}

.picker image {
  width: 18rpx;
  height: 10rpx;
  margin-left: 8rpx;
}

4.更多小程序demo，關(guān)注蘇蘇的碼云，創(chuàng)造不易，希望大家star+關(guān)注，一起學(xué)習(xí)，沖呀~