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>切換名稱</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;
}
