顶部栏

src/main.ts

@@ -8,6 +8,7 @@ import 'vant/es/toast/style'
 import 'vant/es/dialog/style'
 import 'vant/es/notify/style'
 import 'vant/es/image-preview/style'
+import Header from './pages/components/Header/index.vue';
 
 export function createApp() {
     const app = createSSRApp(App);
@@ -16,6 +17,7 @@ export function createApp() {
     app.use(pinia)
     app.use(router);
     let vConsole = new Vconsole();
+    app.component('Header', Header);
     app.use(vConsole);
     return {
         app,

src/pages.json

@@ -10,7 +10,8 @@
 			"path": "pages/home/index",
             "name": "home",
 			"style": {
-				"navigationBarTitleText": "甲秀图库"
+				"navigationBarTitleText": "甲秀图库",
+                "navigationStyle": "custom"
 			}
 		},
         {
@@ -25,7 +26,8 @@
 			"path": "pages/mine/index",
             "name": "mine",
 			"style": {
-				"navigationBarTitleText": "个人中心"
+				"navigationBarTitleText": "个人中心",
+                "navigationStyle": "custom"
 			},
             "meta": {
                 "requireAuth": true

src/pages/classify/index.vue

 <template>
     <div class="bg">
-        <van-sticky>
+        <Header backgroundBox="#D2E4FF">
             <div class="header">
                 <div class="title">分类</div>
                 <div class="search">
@@ -11,7 +11,10 @@
                     <van-icon v-if="queryParams.classifyType" name="clear" color="#969696" @tap="clear" />
                 </div>
             </div>
-        </van-sticky>
+        </Header>
+        <!-- <van-sticky>
+            
+        </van-sticky> -->
         <div class="content">
             <van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
                 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="50"

src/pages/components/Header/index.vue

+<template>
+    <view class="searchComponent" :style="{ height: contentHeight, background: backgroundBox }">
+      <view class="search" :style="{ background }">
+        <wd-icon
+          v-if="show"
+          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 props = defineProps({
+    background: {
+      type: String,
+      default: '',
+    },
+    backIcon: {
+      type: String,
+      default: 'black',
+    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    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>
+  .searchComponent {
+    position: sticky;
+    top: 0;
+    z-index: 999999;
+    transition: background-color 0.5s;
+    // box-sizing: border-box;
+    .search {
+      position: absolute;
+      bottom: 10rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 710rpx;
+      height: 80rpx;
+      // background: rgba(255, 255, 255, 0.8);
+      border-radius: 16rpx 16rpx 16rpx 16rpx;
+      opacity: 0.8;
+      margin: 0 auto;
+      // margin-top: 44rpx;
+      display: flex;
+      align-items: center;
+      // padding-left: 20rpx;
+      box-sizing: border-box;
+      .arrow {
+        width: 15rpx;
+        height: 24rpx;
+      }
+      .icon {
+        font-size: 28rpx;
+        // left: 10rpx;
+        position: absolute;
+      }
+  
+      .title {
+        // width: 100%;
+        font-size: 36rpx;
+        font-family: PingFang SC;
+        margin: 0 auto;
+        display: inline-block;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file

src/pages/mine/index.vue

 <template>
+    <!-- <Header title="个人中心" :showTitle="true" :show="false"></Header> -->
     <div class="container" v-if="userStore.isLogin">
         <div class="userinfo">
             <img class="avatar" mode="aspectFill"