新建system.js //获取设备信息
export const navigationBarHeight = () => {
const { statusBarHeight, platform } = wx.getSystemInfoSync()
const { top, height, width, left } = wx.getMenuButtonBoundingClientRect()
// 状态栏高度
wx.setStorageSync('statusBarHeight', statusBarHeight)
// 胶囊按钮高度 一般是32 如果获取不到就使用32
console.log('height', height)
wx.setStorageSync('menuButtonHeight', height ? height : 32)
// 胶囊按钮的宽度
wx.setStorageSync('menuButtonWidth', width || 87)
// 判断胶囊按钮信息是否成功获取
if (top && top !== 0 && height && height !== 0) {
const navigationBarHeight = (top - statusBarHeight) * 2 + height
// 导航栏高度
wx.setStorageSync('navigationBarHeight', navigationBarHeight)
} else {
wx.setStorageSync('navigationBarHeight', platform === 'android' ? 48 : 40)
}
// 存储胶囊的右边距
console.log(wx.getMenuButtonBoundingClientRect())
wx.setStorageSync('menuButtonLeft', left)
}
再app.vue里面引入
import { navigationBarHeight } from '@/plugins/system'
onLaunch() {
navigationBarHeight ()
}
页面
<template>
<view class="pages-home">
<view class="navigation" :style="'height:' + statusBarHeight + 'px'"></view>
<view
class="title"
:style="
'height:' +
navigationBarHeight +
'px' +
';' +
'line-height:' +
titleHeight +
'px' +
';'
"
>
首页
</view>
<view class="content"></view>
</view>
</template>
<script>
export default {
data() {
return {
navigationBarHeight: 0,
statusBarHeight: 0,
menuButtonLeft: 0,
titleHeight: 0
}
},
created() {
this.navigationBarHeight = wx.getStorageSync('navigationBarHeight')
this.titleHeight = this.navigationBarHeight
this.statusBarHeight = wx.getStorageSync('statusBarHeight')
this.menuButtonLeft = parseInt(wx.getStorageSync('menuButtonLeft')) - 115
}
}
</script>
<style scoped>
.title {
text-align: center;
font-size: 30rpx;
font-weight: bold;
}
.content {
width: 100%;
height: 300rpx;
background-color: #c00;
}
</style>
