55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<!-- 自适应高度：裁剪状态栏高度的组件 -->
|
||
<template>
|
||
<view class="cropStatusbarHeight" :style="{ height: heightCom }">
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||
|
||
export default {
|
||
name: 'CropStatusbarHeight',
|
||
props: {
|
||
// 高度的单位为：px
|
||
// tabBar的高度
|
||
tabBarH: {
|
||
type: Number,
|
||
default: 44
|
||
},
|
||
// 其他需要裁剪的高度
|
||
otherHeight: {
|
||
type: Number,
|
||
default: 0,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight,
|
||
winH: 0,
|
||
pH: 0
|
||
};
|
||
},
|
||
computed: {
|
||
heightCom () {
|
||
const _h = (this.winH - this.tabBarH - this.otherHeight - this.statusBarHeight - uni.upx2px(this.pH)) + 'px'
|
||
this.$emit('cropHeight', _h)
|
||
return _h
|
||
}
|
||
},
|
||
created() {
|
||
const platform = getApp().globalData.platform
|
||
const runningOnOtherPlatforms = getApp().globalData.runningOnOtherPlatforms
|
||
if (runningOnOtherPlatforms && platform === 'android') {
|
||
this.pH = 50
|
||
}
|
||
try {
|
||
this.winH = uni.getSystemInfoSync().windowHeight
|
||
} catch (e) {
|
||
// 给个默认的
|
||
this.winH = 580
|
||
}
|
||
}
|
||
}
|
||
</script>
|