自定义头部

package.json

@@ -28,7 +28,7 @@
         "pinia": "2.0.36",
         "vue": "^3.3.11",
         "vue-i18n": "^9.1.9",
-        "wot-design-uni": "^1.3.2"
+        "wot-design-uni": "^1.3.12"
     },
     "devDependencies": {
         "@dcloudio/types": "^3.3.2",

src/components/navBar/index.vue

 <template>
-    <div class="nav-bar flex-between" :style="{ height: height }">
-        <div class="left">
-            <slot name="left"></slot>
-        </div>
-        <div class="left">
-            <slot name="title"></slot>
-        </div>
-        <div class="left">
-            <slot name="right"></slot>
-        </div>
-    </div>
+    <view class="searchComponent" :style="{ height: contentHeight, background: backgroundBox }">
+        <view class="search" :style="{ background }">
+            <wd-icon v-if="showIcon" name="thin-arrow-left" class="icon" @tap="back" :style="{ color: backIcon }"></wd-icon>
+            <slot></slot>
+            <text class="title" :style="{ color: textColor }" v-if="showTitle">{{ title }}</text>
+        </view>
+    </view>
 </template>
 
 <script setup>
-const height = "44px";
+import { useCountStore } from "@/store";
+import { onMounted, defineProps } from "vue";
+const props = defineProps({
+    background: {
+        type: String,
+        default: ""
+    },
+    backIcon: {
+        type: String,
+        default: "black"
+    },
+    showIcon: {
+        type: Boolean,
+        default: false
+    },
+    backgroundBox: {
+        type: String,
+        default: ""
+    },
+    showTitle: {
+        type: Boolean,
+        default: false
+    },
+    textColor: {
+        type: String,
+        default: "#333333"
+    },
+    title: {
+        type: String,
+        default: "HELLO WORLD"
+    }
+});
+const contentHeight = ref("100rpx");
+onLoad(() => {
+    xma.xh.getSystemInfo({
+        success(res) {
+            // console.log('设备信息', res); // 设备信息
+        }
+    });
+    xma.xh.getMenuButtonBoundingClientRect({
+        success(res) {
+            // console.log('宽度', res.width); // 宽度，单位：px
+            // console.log('高度', res.height); // 高度，单位：px
+            // console.log('上边界坐标', res.top); // 上边界坐标，单位：px
+            // console.log('右边界坐标', res.right); // 右边界坐标，单位：px
+            // console.log('下边界坐标', res.bottom); // 下边界坐标，单位：px
+            // console.log('左边界坐标', res.left);
+            contentHeight.value = (res.top + res.bottom) / 2 + 25 + "px";
+            // contentHeight.value = res.bottom * 2 + 10 + 'rpx'; // 左边界坐标，单位：px
+        }
+    });
+});
+
+// 返回上一级
+const back = () => {
+    xma.navigateBack({
+        delta: 1
+    });
+};
 </script>
 
 <style lang="scss" scoped>
-.nav-bar {
-    box-sizing: border-box;
-    width: 750rpx;
-    padding: 0 32rpx;
-    color: #ffffff;
+.searchComponent {
+    position: sticky;
+    top: 0;
+    z-index: 999999;
+    transition: background-color 0.5s;
+
+    // box-sizing: border-box;
+    .search {
+        position: absolute;
+        bottom: 10rpx;
+        left: 50%;
+
+        // padding-left: 20rpx;
+        box-sizing: border-box;
+
+        // margin-top: 44rpx;
+        display: flex;
+        align-items: center;
+        width: 710rpx;
+        height: 80rpx;
+        margin: 0 auto;
+
+        // background: rgba(255, 255, 255, 0.8);
+        border-radius: 16rpx;
+        opacity: 0.8;
+        transform: translateX(-50%);
+        .arrow {
+            width: 15rpx;
+            height: 24rpx;
+        }
+        .icon {
+            // left: 10rpx;
+            position: absolute;
+            font-size: 28rpx;
+        }
+        .title {
+            display: inline-block;
+            margin: 0 auto;
+            font-family: "PingFang SC";
+
+            // width: 100%;
+            font-size: 36rpx;
+        }
+    }
 }
 </style>

src/components/navBar2/index.vue

+<template>
+    <div class="nav-bar flex-between" :style="{ height: height }">
+        <div class="left">
+            <slot name="left"></slot>
+        </div>
+        <div class="left">
+            <slot name="title"></slot>
+        </div>
+        <div class="left">
+            <slot name="right"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const height = "44px";
+</script>
+
+<style lang="scss" scoped>
+.nav-bar {
+    box-sizing: border-box;
+    width: 750rpx;
+    padding: 0 32rpx;
+    color: #ffffff;
+}
+</style>

src/main.ts

-import { createSSRApp } from 'vue';
-import App from './App.vue';
-import store from './store';
+import { createSSRApp } from "vue";
+import App from "./App.vue";
+import store from "./store";
+import NavBar from "@/components/navBar/index.vue";
 
 export function createApp() {
-  const app = createSSRApp(App);
-  app.use(store);
-  return {
-    app,
-  };
+    const app = createSSRApp(App);
+    app.component("NavBar", NavBar);
+    app.use(store);
+    return {
+        app
+    };
 }

src/pages/user/index.vue

 <template>
     <div class="user-container">
-        <navBar>
-            <template #title>我的</template>
-        </navBar>
+        <NavBar :showIcon="false" :showTitle="true" title="我的" textColor="#ffffff"></NavBar>
         <view class="bg"></view>
         <!-- 用户信息 -->
         <view class="user-info flex-align-center">
@@ -43,7 +41,6 @@
 </template>
 
 <script setup>
-import navBar from "@/components/navBar/index.vue";
 import { getUserResumeApi, getLoginUserApi } from "@/api/user";
 import { ref } from "vue";
 import { getEnumText } from "@/utils/utils.js";