注册全局头部组件

src/Components/navBar/navBar.vue

@@ -19,12 +19,12 @@ const containerMargin = ref(0);
 const bgColor = ref('');
 
 onMounted(() => {
-  const capsuleButtonInfo = xma.getMenuButtonBoundingClientRect();
-  const systemInfo = xma.getSystemInfoSync();
+  const capsuleButtonInfo = xma.xh.getMenuButtonBoundingClientRect();
+  const systemInfo = xma.xh.getSystemInfoSync();
   const gap = capsuleButtonInfo.top - systemInfo.statusBarHeight;
   navBarHeight.value = gap * 2 + capsuleButtonInfo.height + systemInfo.statusBarHeight;
-  containerHeight.value = capsuleButtonInfo.height;
-  containerMargin.value = capsuleButtonInfo.top;
+  // containerHeight.value = capsuleButtonInfo.height;
+  // containerMargin.value = capsuleButtonInfo.top;
 });
 </script>
 

src/components/index/Search.vue

 <template>
-  <view class="search" :style="{ background: background }">
+  <view class="content" :style="{ height: contentHeight, background: backgroundBox }">
+    <view class="search" :style="{ background }">
       <wd-icon
         v-if="show"
         name="thin-arrow-left"
@@ -8,7 +9,7 @@
         :style="{ color: backIcon }"
       ></wd-icon>
       <slot></slot>
-    <view class="searchBox">
+      <view class="searchBox" :style="{ border }" v-if="type === 1">
         <image
           class="magnifyingGlass"
           src="../../static/index/magnifyingGlass.png"
@@ -16,6 +17,8 @@
         />
         <input type="text" :value="test" class="text" @confirm="search" confirm-type="搜索" />
       </view>
+      <text class="title" :style="{ color: textColor }" v-else>{{ title }}</text>
+    </view>
   </view>
 </template>
 
@@ -29,15 +32,36 @@ const props = defineProps({
   },
   backIcon: {
     type: String,
-    default: 'white',
+    default: 'black',
   },
   show: {
     type: Boolean,
     default: true,
   },
+  backgroundBox: {
+    type: String,
+    default: '',
+  },
+  border: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: Number,
+    default: 1,
+  },
+  textColor: {
+    type: String,
+    default: '#333333',
+  },
+  title: {
+    type: String,
+    default: 'HELLO WORLD',
+  },
 });
+const contentHeight = ref('100rpx');
 const emit = defineEmits(['toSearch']);
-const title = ref('小程序平台');
+// const title = ref('小程序平台');
 const { countInfo, addCount } = useCountStore();
 const test = ref('');
 onLoad(() => {
@@ -53,7 +77,8 @@ onLoad(() => {
       console.log('上边界坐标', res.top); // 上边界坐标，单位：px
       console.log('右边界坐标', res.right); // 右边界坐标，单位：px
       console.log('下边界坐标', res.bottom); // 下边界坐标，单位：px
-      console.log('左边界坐标', res.left); // 左边界坐标，单位：px
+      console.log('左边界坐标', res.left);
+      contentHeight.value = res.bottom * 2 + 10 + 'rpx'; // 左边界坐标，单位：px
     },
   });
 });
@@ -78,24 +103,37 @@ function onHandleClick() {
 </script>
 
 <style lang="scss">
-.search {
+.content {
+  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;
+    // margin-top: 44rpx;
     display: flex;
     align-items: center;
-  padding-left: 20rpx;
+    // padding-left: 20rpx;
     box-sizing: border-box;
+    text-align: center;
     .arrow {
       width: 15rpx;
       height: 24rpx;
     }
     .icon {
       font-size: 28rpx;
+      // left: 10rpx;
+      position: absolute;
     }
     .searchBox {
       opacity: 1;
@@ -116,5 +154,11 @@ function onHandleClick() {
         font-size: 24rpx;
       }
     }
+    .title {
+      width: 100%;
+      font-size: 36rpx;
+      font-family: PingFang SC;
+    }
+  }
 }
 </style>

src/main.ts

@@ -6,8 +6,10 @@ import Vconsole from 'vconsole';
 import './styles/flex.scss';
 // 字体
 import '@/assets/iconfont/font.css';
+import Search from './components/index/Search.vue';
 export function createApp() {
   const app = createSSRApp(App);
+  app.component('Search', Search);
   const vConsole = new Vconsole();
   app.use(store, vConsole);
   return {

src/pages/index/foodClassification.vue

 <template>
-  <div class="container" style="padding-bottom: 10rpx">
-    <view class="bg-img"></view>
-    <view class="top">
   <!-- 搜索 -->
-      <Search @toSearch="toSearch">
-        <text class="title-icon">{{ categoryNames }}</text>
+  <Search
+    @toSearch="toSearch"
+    :backIcon="backIconColor"
+    :backgroundBox="backgroundBox"
+    :border="border"
+  >
+    <text class="title-icon" :style="{ color: textColor }">{{ categoryNames }}</text>
     <!-- <image class="food" :src="pics" mode="widthFix" /> -->
   </Search>
+  <view class="container" style="padding-bottom: 10rpx">
+    <view class="bg-img"></view>
+    <view class="top">
       <!-- 类别选择 -->
       <scroll-view
         v-if="topDiscountedProducts.length > 0"
@@ -110,17 +115,21 @@
     >
       没有更多啦~
     </view>
-  </div>
+  </view>
 </template>
 
 <script setup>
 import FoodDetails from '../../components/index/FoodDetails.vue';
-import Search from '../../components/index/Search.vue';
+// import Search from '../../components/index/Search.vue';
 import Classification from '../../components/index/Classification.vue';
 import Position from '../../components/index/Position.vue';
 import Sort from '../../components/index/Sort.vue';
 import { getByParentId, merchantList, prodSpecial } from '../../api/index';
 
+const backIconColor = ref('white');
+const textColor = ref('#ffffff');
+const backgroundBox = ref('');
+const border = ref('');
 const isLoadReachBottom = ref(null);
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
 const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
@@ -344,12 +353,32 @@ function getLocationFn() {
     });
   });
 }
+// 监听页面滚动
+onPageScroll((e) => {
+  if (e.scrollTop > 20) {
+    backIconColor.value = '';
+    textColor.value = 'black';
+    backgroundBox.value = '#fff';
+    border.value = '1rpx solid gray';
+  } else {
+    backIconColor.value = 'white';
+    textColor.value = 'white';
+    backgroundBox.value = '';
+    border.value = '';
+  }
+});
 </script>
 
 <style lang="scss" scoped>
 page {
   background: #f3f3f3;
 }
+.title-icon {
+  font-family: 'YSBTH';
+  font-size: 24 * 2rpx;
+  margin-left: 50rpx;
+  margin-right: 10rpx;
+}
 .container {
   .bg-img {
     width: 100%;
@@ -364,12 +393,7 @@ page {
     min-height: 420rpx;
     border-radius: 0rpx 0rpx 0rpx 0rpx;
     overflow: hidden;
-    .title-icon {
-      font-family: 'YSBTH';
-      font-size: 24 * 2rpx;
-      margin-left: 30rpx;
-      color: #ffffff;
-    }
+
     .food {
       width: 178rpx;
       height: 45rpx;

src/pages/index/index.vue

 <template>
-  <view class="container">
-    <view class="top">
   <!-- 搜索 -->
   <Search
+    :backgroundBox="backgroundBox"
     background="rgba(255, 255, 255, 0.8)"
-        backIcon="black"
     @toSearch="toSearch"
     :show="false"
   >
     <image class="food" src="../../static/index/food.png" mode="widthFix" />
   </Search>
+  <view class="container">
+    <view class="top">
       <!-- 类别选择 -->
       <view class="classification">
         <view class="classification-top">
@@ -164,7 +164,7 @@ import fab from '../../components/fab/fab.vue';
 import myIcon from '../../components/wd-icon-local/wd-icon.vue';
 import { onMounted, reactive, ref } from 'vue';
 import { useCountStore } from '@/store';
-import Search from '../../components/index/Search.vue';
+// import Search from '../../components/index/Search.vue';
 import FoodDetails from '../../components/index/FoodDetails.vue';
 import ShopCard from '../../components/index/ShopCard.vue';
 import Marketing from '../../components/index/Marketing.vue';
@@ -181,7 +181,8 @@ import {
   couponMainList,
   receiveCoupon,
 } from '../../api/index';
-
+const backgroundBox = ref('#fa5151');
+const border = ref('');
 // import testJson from '../../static/json/test.json';
 const nowTime = ref(new Date().getTime());
 const title = ref('小程序平台');
@@ -515,24 +516,35 @@ onReachBottom(() => {
   }
   show.value = true;
 });
+// 监听页面滚动
+onPageScroll((e) => {
+  if (e.scrollTop > 20) {
+    // backgroundBox.value = '#fff';
+    // border.value = '1px solid #fa5151';
+  } else {
+    // backgroundBox.value = '#fa5151';
+    // border.value = '';
+  }
+});
 </script>
 
 <style lang="scss" scoped>
 page {
   background: #f3f3f3;
 }
+.food {
+  width: 178rpx;
+  height: 45rpx;
+  margin-left: 25rpx;
+}
 .container {
   .top {
     width: 100%;
-    height: 440rpx;
+    // height: 440rpx;
     background: linear-gradient(180deg, #fa5151 0%, rgba(243, 243, 243, 0) 100%);
     border-radius: 0rpx 0rpx 0rpx 0rpx;
     overflow: hidden;
-    .food {
-      width: 178rpx;
-      height: 45rpx;
-      margin-left: 25rpx;
-    }
+
     .classification {
       width: 710rpx;
       height: 304rpx;
@@ -613,6 +625,7 @@ page {
       box-sizing: border-box;
       white-space: nowrap;
       width: 80%;
+      z-index: -1;
       .redBagBox {
         margin-right: 8rpx;
         width: 124rpx;