99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 占位高度 -->
|
|
<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
|
|
<view class="navbar" :style="{ height: `${height}px`, backgroundColor: isTransparent ? 'transparent' : '#fff' }">
|
|
<!-- 左边返回键 -->
|
|
<view v-if="showBack" @click="goBack" class="back-icon">
|
|
<uni-icons type="left" size="24"></uni-icons>
|
|
</view>
|
|
<!-- 中间内容 -->
|
|
<view class="center-content" :style="centerContentStyle">
|
|
<view v-if="showSearch">
|
|
<uni-search-bar placeholder="搜索"></uni-search-bar>
|
|
</view>
|
|
<view v-else>{{ title }}</view>
|
|
</view>
|
|
<!-- 右边文字 -->
|
|
<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useNavbarStore } from '@/store/navbarStore';
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const store = useNavbarStore();
|
|
const { showBack, rightText, showSearch, title, isTransparent, height, hasPlaceholder } = store;
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
};
|
|
|
|
const onRightTextClick = () => {
|
|
console.log('右边文字被点击');
|
|
};
|
|
|
|
const centerContentStyle = ref({});
|
|
|
|
onMounted(() => {
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
const statusBarHeight = systemInfo.statusBarHeight;
|
|
|
|
// 计算标题的垂直偏移量
|
|
const verticalOffset = menuButtonInfo.top - statusBarHeight;
|
|
const titleHeight = menuButtonInfo.height;
|
|
|
|
centerContentStyle.value = {
|
|
paddingTop: `${20}px`,
|
|
height: `${titleHeight}px`,
|
|
lineHeight: `${titleHeight}px`,
|
|
boxSizing: 'border-box',
|
|
|
|
};
|
|
console.log(centerContentStyle)
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 15px;
|
|
z-index: 999;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.back-icon {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.center-content {
|
|
flex: 1;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.right-text {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
</style> |