89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
<template>
|
|
<!-- #ifndef H5 -->
|
|
<view class="nav-box" :style="{'height':height}">
|
|
<!-- 状态栏占位 -->
|
|
<view class="status_bar" :style="{'height':statusBarHeight}"></view>
|
|
<!-- 导航内容 -->
|
|
<view class="nav-main" :style="{'height': navBarHeight}" style="font-size: 16px;opacity: 1;">
|
|
<view class="title-info">{{title}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view style="background-color: #ffffff;" :style="{'height':statusBarHeight}"></view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 自定义导航栏高度总和
|
|
height: 0,
|
|
// 状态栏高度
|
|
statusBarHeight: 0,
|
|
// 导航栏高度（不包含状态栏）
|
|
navBarHeight: 0
|
|
}
|
|
},
|
|
created() {
|
|
let that = this;
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
if (res.model.indexOf('iPhone') !== -1) {
|
|
that.navBarHeight = 44 + 'px'
|
|
that.height = res.statusBarHeight + 44 + 'px'
|
|
} else {
|
|
that.navBarHeight = 48 + 'px'
|
|
that.height = res.statusBarHeight + 48 + 'px'
|
|
}
|
|
that.statusBarHeight = res.statusBarHeight + 'px';
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.nav-box {}
|
|
|
|
.status_bar {
|
|
/* width: 100%; */
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.nav-main {
|
|
/* position: fixed; */
|
|
padding: 7px 3px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
z-index: 998;
|
|
background-color: #ffffff;
|
|
/* width: 100%; */
|
|
}
|
|
|
|
.title-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
/* font-weight: bold; */
|
|
}
|
|
|
|
.nav-main-title {
|
|
color: #000;
|
|
font-size: 32px;
|
|
}
|
|
</style> |