注册全局头部组件

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 }">
-    <wd-icon
-      v-if="show"
-      name="thin-arrow-left"
-      class="icon"
-      @tap="back"
-      :style="{ color: backIcon }"
-    ></wd-icon>
-    <slot></slot>
-    <view class="searchBox">
-      <image
-        class="magnifyingGlass"
-        src="../../static/index/magnifyingGlass.png"
-        mode="aspectFit|aspectFill|widthFix"
-      />
-      <input type="text" :value="test" class="text" @confirm="search" confirm-type="搜索" />
+  <view class="content" :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>
+      <view class="searchBox" :style="{ border }" v-if="type === 1">
+        <image
+          class="magnifyingGlass"
+          src="../../static/index/magnifyingGlass.png"
+          mode="aspectFit|aspectFill|widthFix"
+        />
+        <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,42 +103,61 @@ function onHandleClick() {
 </script>
 
 <style lang="scss">
-.search {
-  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;
+.content {
+  position: sticky;
+  top: 0;
+  z-index: 999999;
+  transition: background-color 0.5s;
   box-sizing: border-box;
-  .arrow {
-    width: 15rpx;
-    height: 24rpx;
-  }
-  .icon {
-    font-size: 28rpx;
-  }
-  .searchBox {
-    opacity: 1;
-    width: 256rpx;
-    height: 56rpx;
-    background: #ffffff;
-    border-radius: 28rpx 28rpx 28rpx 28rpx;
+  .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;
-    margin-left: 20rpx;
-    .magnifyingGlass {
-      width: 26rpx;
-      height: 26rpx;
+    // 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;
+      width: 256rpx;
+      height: 56rpx;
+      background: #ffffff;
+      border-radius: 28rpx 28rpx 28rpx 28rpx;
+      display: flex;
+      align-items: center;
+      padding-left: 20rpx;
+      margin-left: 20rpx;
+      .magnifyingGlass {
+        width: 26rpx;
+        height: 26rpx;
+      }
+      .text {
+        margin-left: 10rpx;
+        font-size: 24rpx;
+      }
     }
-    .text {
-      margin-left: 10rpx;
-      font-size: 24rpx;
+    .title {
+      width: 100%;
+      font-size: 36rpx;
+      font-family: PingFang SC;
     }
   }
 }

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">
+  <!-- 搜索 -->
+  <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">
-      <!-- 搜索 -->
-      <Search @toSearch="toSearch">
-        <text class="title-icon">{{ categoryNames }}</text>
-        <!-- <image class="food" :src="pics" mode="widthFix" /> -->
-      </Search>
       <!-- 类别选择 -->
       <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>
+  <!-- 搜索 -->
+  <Search
+    :backgroundBox="backgroundBox"
+    background="rgba(255, 255, 255, 0.8)"
+    @toSearch="toSearch"
+    :show="false"
+  >
+    <image class="food" src="../../static/index/food.png" mode="widthFix" />
+  </Search>
   <view class="container">
     <view class="top">
-      <!-- 搜索 -->
-      <Search
-        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="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;