小程序 自定义导航栏头部
<template>
<view class="home-container">
<view class="navbar-fixed">
<!-- 状态栏小程序撑起高度 -->
<view :style="{ height: statusBarHeight + 'px' }"></view>
<view class="cu-bar" :style="{ height: navBarHeight + 'px' }">
//自定义导航栏头部
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0 /* 状态栏高度 */,
navBarHeight: 0 /* 导航栏高度 */,
windowWidth: 375 /* 窗口宽度 */,
};
},
components: {},
methods: {},
onLoad() {},
onReachBottom() {},
onPullDownRefresh() {},
onShow() {
// 获取手机系统信息
const phoneInfo = uni.getSystemInfoSync();
// console.log(phoneInfo);
// 设置状态栏高度(H5顶部无状态栏小程序有状态栏需要撑起高度)
this.statusBarHeight = phoneInfo.statusBarHeight;
this.windowWidth = phoneInfo.windowWidth;
// 除了h5 app mp-alipay的情况下执行
// #ifndef H5 || APP-PLUS || MP-ALIPAY
// 获取胶囊的位置
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
this.navBarHeight = menuButtonInfo.bottom - phoneInfo.statusBarHeight + (menuButtonInfo.top - phoneInfo.statusBarHeight);
this.windowWidth = menuButtonInfo.left;
// #endif
}
};
</script>
<style lang="scss" scoped>
.home-container {
padding: 0 20rpx;
background: #2266e1;
.navbar-fixed {
background: #2266e1;
.cu-bar {
display: flex;
align-items: center;
padding-left: 36rpx;
box-sizing: border-box;
color: #ffffff;
.title {
font-size: 34rpx;
margin-right: 52rpx;
}
.search {
width: 300rpx;
}
}
}
}
</style>