首页,我的 写扫码点餐之前提交1.0.0

components/CustomNavbar.vue

@@ -2,20 +2,20 @@
 	<view>
 		<!-- 占位高度 -->
 		<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
-		<view class="navbar" :style="[centerContentStyle,navbarStyle]">
+		<view class="navbar" :style="[centerContentStyle.oneStyle,navbarStyle]">
 			<!-- 左边返回键 -->
 			<view v-if="showBack" @click="goBack" class="back-icon">
 				<up-icon name="arrow-left" color="#606266" size="24"></up-icon>
 			</view>
 			<!-- 中间内容 -->
-			<view class="center-content" >
+			<view class="center-content">
 				<view v-if="showSearch">
 					<view class="navbar_tow_tow flex-start">
 						<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
 						<view class="navbar_tow_towview">搜索</view>
 					</view>
 				</view>
-				<view v-else>{{ title }}</view>
+				<view v-else :style="[centerContentStyle.towStyle]">{{ title }}</view>
 			</view>
 			<!-- 右边文字 -->
 			<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
@@ -30,6 +30,7 @@
 	} from '@/stores/navbarStore';
 	import {
 		ref,
+		reactive,
 		watch,
 		onMounted,
 		computed
@@ -39,13 +40,12 @@
 	const {
 		showBack,
 		rightText,
-		showSearch,
-		title,
 		isTransparent,
 		height,
 		hasPlaceholder
 	} = store;
-	
+	const showSearch = computed(() => store.showSearch);
+	const title = computed(() => store.title);
 	const keyword = ref()
 
 	const goBack = () => {
@@ -57,7 +57,7 @@
 	const onRightTextClick = () => {
 		console.log('右边文字被点击');
 	};
-	
+
 	const navbarStyle = computed(() => {
 		return {
 			height: `${height}px`,
@@ -65,23 +65,31 @@
 		};
 	});
 	// 小程序单独胶囊的样式
-	const centerContentStyle = ref({});
+	const centerContentStyle = reactive({
+		oneStyle: {},
+		towStyle: {}
+	});
 	onMounted(() => {
 		// #ifdef MP-WEIXIN
 		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 		const systemInfo = uni.getSystemInfoSync();
 		const statusBarHeight = systemInfo.statusBarHeight;
+		console.log(menuButtonInfo)
 		// 计算标题的垂直偏移量
 		// const verticalOffset = menuButtonInfo.top - statusBarHeight;
-		const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(menuButtonInfo.top - menuButtonInfo.height)
+		const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
+			menuButtonInfo.top - menuButtonInfo.height)
 		const titleHeight = menuButtonInfo.height;
-		centerContentStyle.value = {
+		centerContentStyle.oneStyle = {
 			paddingTop: `${verticalOffset}px`,
-			paddingRight:`${menuButtonInfo.width +20}px`,
+			paddingRight: `${menuButtonInfo.width +20}px`,
+			// paddingTeft: `${menuButtonInfo.width +20}px`,
 			height: `${height}px`,
-			lineHeight: `${height}px`,
 			boxSizing: 'border-box',
 		};
+		centerContentStyle.towStyle = {
+			paddingLeft: `${menuButtonInfo.right - menuButtonInfo.left}px`,
+		};
 		// #endif
 
 	});