50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="status-line" :style="'height:' + lineHeight +';'">
|
|
</view>
|
|
<view class="status-line" :style="'height:' + navigateHeight +';'">
|
|
<view @click="goBack" class="flex" :style="'height:' + navigateHeight +';align-item:center;padding:0 20rpx'">
|
|
<u-icon name="arrow-left" ></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"customHeader",
|
|
data() {
|
|
return {
|
|
navigateHeight:0,
|
|
lineHeight:0,
|
|
};
|
|
},
|
|
methods:{
|
|
goBack(){
|
|
this.$emit('goBack')
|
|
}
|
|
},
|
|
mounted() {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
// px转换到rpx的比例
|
|
let pxToRpxScale = 750 / systemInfo.windowWidth;
|
|
let systems = {
|
|
ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
|
|
navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
|
|
ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
|
|
ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
|
|
ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale // 屏幕的高度
|
|
}
|
|
// 底部tabBar的高度
|
|
systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems
|
|
.ktxWindowHeight // 底部tabBar的高度
|
|
this.lineHeight = systems.ktxStatusHeight + 'rpx';
|
|
this.navigateHeight = systems.navigationHeight +'rpx';
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |