⼩程序⾃定义导航栏⾼度计算
⾃定义导航栏后页⾯就成了全屏状态,如果还要⾃定义导航栏,那么就需要重新计算导航栏的⾼度,让其⼀直 fixed 在头部。
<!-- 自定义导航栏 -->
<view class="top_scroll">
<view class="nav" :style="topx">
<!-- 自定义导航栏 -->
<view class="status_bar" :style="{ height: statusBarHeight + 'px' }">
<!-- uni-ui这里是状态栏 -->
</view>
<!-- 胶囊位置信息 -->
<view
class="nav_content"
:style="{height:navBarHeight+'px;line-height:'+navBarHeight+'px'}"
>
<view class="nav_left" @click="selectCity">
<text v-if="currentCity.districtCode > 0">{{
currentCity.district
}}</text>
<text v-else-if="currentCity.cityCode > 0">{{
currentCity.city
}}</text>
<text v-else-if="currentCity.provinceCode > 0">{{
currentCity.province
}}</text>
<text v-else>暂无 </text>
<image
class="top3xia"
src="../../static/arrow_down.png"
mode="widthFix"
></image>
</view>
<view class="nav_title">{{title}} </view>
</view>
</view>
</view>
//第一次加载时调用
created() {
if (wx.canIUse("getMenuButtonBoundingClientRect")) {
let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
console.log("sysInfo", sysInfo);
// 获取状态栏高度
this.statusBarHeight = sysInfo.statusBarHeight;
// 胶囊位置信息
let rect = wx.getMenuButtonBoundingClientRect();
this.menuButtonRect = JSON.parse(JSON.stringify(rect));
// 导航栏高度
let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
this.navBarHeight = navBarHeight;
// 自定义导航栏的高度
this.height = sysInfo.statusBarHeight + navBarHeight;
// 计算状态栏与导航栏的总高度
var customBar = this.navBarHeight+this.statusBarHeight
this.topx = "height:" + customBar + "px";
// 底部排除自定义导航的高度
const Bottom = (sysInfo.screenHeight - sysInfo.safeArea.bottom) * 2 + 120;
const marTop = customBar + 5;
this.marginTop = "margin-top:" + marTop + "px;display: inline-block;";
this.paddingBottom = "padding-bottom: " + Bottom + "rpx";
} else {
wx.showToast({
title: "您的微信版本过低,界面可能会显示不正常",
icon: "none",
duration: 4000,
});
}
},
.top_scroll {
position: fixed;
width: 100%;
z-index: 10000;
}
.nav {
/* background-color: blue; */
background-image: linear-gradient(
180deg,
rgba(87, 149, 248, 1),
rgba(179, 211, 254, 1)
);
min-height: 50rpx;
position: relative;
.nav_content {
position: relative;
// border: solid 1px #f00;
.nav_title {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
// height: 80rpx;
// line-height: 80rpx;
font-size: 30rpx;
font-weight: 1000;
color: #fff;
}
.nav_left {
position: absolute;
bottom: 0;
width: 25%;
z-index: 10;
color: #fff;
left: 20rpx;
text-align: left;
font-size: 30rpx;
}
.top3xia {
width: 20rpx;
margin-left: 12rpx;
}
}
}