122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<view class="navbar">
|
||
|
|
<view class="fixed">
|
||
|
|
<!-- 状态栏站位 -->
|
||
|
|
<view :style="{height: statusBarHeight + 'px'}"></view>
|
||
|
|
<!-- 导航栏内容 -->
|
||
|
|
<view class="content" :style="{height: navbarHeight + 'px', width: windowWidth + 'px'}">
|
||
|
|
<view class="title">
|
||
|
|
<view class="icon" v-if="isBack">
|
||
|
|
<u-icon name="arrow-left" :color="color" size="18" @click="handleGoBack"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="text" :style="{marginLeft: menuButtonWidth + 'px', color: color}">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 下面的45px元素是为了将内容挤下去 -->
|
||
|
|
<view :style="{height: computedHeight + 'px'}"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { handleError } from 'vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "NavBar",
|
||
|
|
props: {
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: '#000000',
|
||
|
|
},
|
||
|
|
isBack: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
statusBarHeight: 20,
|
||
|
|
navbarHeight: 45,
|
||
|
|
windowWidth: 375,
|
||
|
|
menuButtonWidth: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
computedHeight() {
|
||
|
|
return this.statusBarHeight + this.navbarHeight
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// 获取手机系统信息
|
||
|
|
const info = uni.getSystemInfoSync()
|
||
|
|
// 设置状态栏高度
|
||
|
|
this.statusBarHeight = info.statusBarHeight
|
||
|
|
this.windowWidth = info.windowWidth
|
||
|
|
|
||
|
|
/* h5 app mp-ali都是不支持getMenuButtonBoundingClientRect这个api的 */
|
||
|
|
/* 微信、百度、QQ都是支持getMenuButtonBoundingClientRect这个api的 */
|
||
|
|
// #ifndef H5 || APP-PLUS || MP-ALIPAY
|
||
|
|
// 获取微信小程序胶囊的位置
|
||
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
// (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度) = 导航栏高度
|
||
|
|
this.navbarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
|
||
|
|
.statusBarHeight)
|
||
|
|
// 动态计算导航栏宽度
|
||
|
|
this.windowWidth = menuButtonInfo.left
|
||
|
|
// 胶囊宽度
|
||
|
|
this.menuButtonWidth = menuButtonInfo.width;
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 返回
|
||
|
|
handleGoBack() {
|
||
|
|
uni.navigateBack();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.navbar {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.fixed {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
position: absolute;
|
||
|
|
left: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 34rpx;
|
||
|
|
line-height: 50rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0 80rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|