在 Uniapp 开发小程序的过程中,常常会遇到官网提供的 appbar 计划无奈满足开发需要的问题,在应用自定义 appbar 开发过程中,难以避免的会遇到适配刘海屏的问题,接下来我将会带给大家最完满的刘海屏适配计划,间接上代码。
在 app.vue 中退出获取机型头部高度的办法,并把获取的数据存入 vuex
<script>
export default {data() {
return {
globalData: {
// 全局数据管理
navBarHeight: 0, // 导航栏高度
menuBottom: 0, // 胶囊距底部间距(顶部间距也是这个)menuHeight: 0, // 胶囊高度
},
}
},
methods: {calcNavBarInfo () {
// 获取零碎信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮地位信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距(胶囊上坐标地位 - 状态栏高度)* 2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
// 状态栏和菜单按钮 (标题栏) 之间的间距
// 等同于菜单按钮 (标题栏) 到注释之间的间距(胶囊上坐标地位 - 状态栏高度)this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
// 菜单按钮栏 (标题栏) 的高度
this.globalData.menuHeight = menuButtonInfo.height;
this.$store.commit('update_globalStyle', this.globalData);
}
},
onLaunch: function() {console.log('App Launch');
this.calcNavBarInfo();},
onShow: function() {console.log('App Show')
},
onHide: function() {console.log('App Hide')
}
}
</script>
<style>
/* 每个页面公共 css */
view {box-sizing: border-box;}
::-webkit-scrollbar {display: none;}
.flex-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
</style>
创立自定义的 appbar 组件:
<template>
<view class="nav" :style="`height: ${navBarHeight}px`">
<!-- 胶囊区域 -->
<view class="capsule-box" :style="`height:${menuHeight}px; min-height:${menuHeight}px; line-height:${menuHeight}px; bottom:${menuBottom}px;`">
<!-- 增加本人需要的性能 -->
<view class="nav-handle">
<view class="back">
</view>
<view class="home">
</view>
</view>
<text class="nav-title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
name:"appbar",
props: {
title: {
type: String,
default: '导航题目'
},
},
data() {return {};
},
computed: {navBarHeight() {return this.$store.state.globalStyle.navBarHeight},
menuHeight() {return this.$store.state.globalStyle.menuHeight},
menuBottom() {return this.$store.state.globalStyle.menuBottom},
},
mounted() {console.log(this.navBarHeight, 'bar')
}
}
</script>
<style scoped lang="scss">
.nav {
width: 100vw;
position: relative;
}
// 胶囊栏
.capsule-box {
width: 100vw;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
// 题目文字
.nav-title {
height: 100%;
font-size: 32rpx;
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
接下来就是在所需页面里引入 appbar 组件。能够看到完满适配了刘海屏和非刘海屏,无论机型。心愿本文对你有用!