顶部适配

src/components/index/Search.vue

@@ -75,7 +75,7 @@ const back = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .searchComponent {
   position: sticky;
   top: 0;

src/pages.json

@@ -186,9 +186,7 @@
 		{
 			"path": "pages/assistingAgriculture/album/index",
 			"style": {
-				"navigationBarTitleText": "用户相册",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationStyle":""
+				"navigationBarTitleText": "用户相册"
 			}
 		},
 		{

src/pages/assistingAgriculture/album/index.vue

 <template>
   <div class="album">
+    <Search backgroundBox="white" title="用户相册" :showTitle="true"></Search>
     <scroll-view class="content" @scrolltolower="scrolltolower" scroll-y>
-      <!-- <div class="filter-box">
-        <div class="active">全部</div>
-        <div v-for="(v, i) in filterList" :key="i">{{ v.text }}({{ v.value }})</div>
-      </div> -->
       <div class="card-wrap">
         <card :photoData="photoData" />
       </div>

src/pages/assistingAgriculture/commentList/index.vue

 <template>
   <div class="comment-list">
-    <div class="top-bar flex-align-center">
+    <!-- <div class="top-bar flex-align-center">
       <wd-icon name="thin-arrow-left" @tap="back"></wd-icon>
       <wd-search @search="search" hide-cancel placeholder="点评关键词/特色" placeholder-left />
-    </div>
+    </div> -->
+    <Search backgroundBox="white">
+      <wd-search @search="search" hide-cancel placeholder="点评关键词/特色" placeholder-left />
+    </Search>
     <scroll-view @scrolltolower="scrolltolower" class="content" :scroll-y="true">
       <div class="filter-box">
         <div class="score-sort flex-between">
@@ -189,16 +192,11 @@ uni-page-body {
   background-color: #f3f3f3;
   display: flex;
   flex-direction: column;
-  .top-bar {
-    padding: 16rpx 40rpx;
-    font-size: 28rpx;
-    background: #fff;
-    .wd-search {
-      width: 492rpx;
-      height: 56rpx;
-      padding: 0;
-      margin-left: 20rpx;
-    }
+  .wd-search {
+    width: 492rpx;
+    height: 56rpx;
+    padding: 0;
+    margin-left: 50rpx;
   }
   .content {
     height: 132rpx;

src/pages/index/coupon.vue

 <template>
   <view class="container">
-    <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
+    <Search title="优惠券" :showTitle="true" backgroundBox="white"></Search>
     <scroll-view class="tabs" scroll-x="true" @scroll="scroll">
       <text
         @tap="choice(index, item.value)"
@@ -145,18 +145,10 @@ page {
 }
 .container {
   position: relative;
-  .icon {
-    font-size: 28rpx;
-    margin-right: 40rpx;
-    position: absolute;
-    left: 30rpx;
-    top: 37rpx;
-    z-index: 999;
-  }
   .tabs {
     white-space: nowrap;
     padding: 0 30rpx;
-    padding-left: 80rpx;
+    // padding-left: 80rpx;
     box-sizing: border-box;
     height: 100rpx;
     line-height: 100rpx;
@@ -167,7 +159,6 @@ page {
     position: sticky;
     top: 0;
     z-index: 99;
-
     .tab {
       display: inline-block;
       margin-right: 40rpx;

src/pages/index/index.vue

@@ -149,7 +149,7 @@
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData1" />
     <!-- 营销模块 -->
-    <Marketing />
+    <!-- <Marketing /> -->
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData2" />
     <view
@@ -807,8 +807,8 @@ page {
     box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
     margin: 0 auto;
     margin-top: 10rpx;
-    position: sticky;
-    top: 0;
+    // position: sticky;
+    // top: 0;
     z-index: 99;
     uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
       /* 隐藏滚动条，但依旧具备可以滚动的功能 */

src/pages/index/listFood.vue

 <template>
   <view class="container">
+    <search
+      :backIcon="backIcon"
+      style="position: fixed; top: 0; width: 100%"
+      :backgroundBox="backgroundBox"
+      :title="title"
+      :showTitle="true"
+    ></search>
     <view class="head">
-      <view class="top" :style="{ backgroundImage: topBg }">
-        <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
-      </view>
+      <view class="top" :style="{ backgroundImage: topBg }"></view>
       <view class="bootom">
         <view class="bootom-top">
           <view class="option" @tap="locationFiltering(0)">
@@ -88,6 +93,9 @@ const topBg = ref(null);
 const categoryData = ref([]);
 const show = ref(false);
 const cardData = ref([]);
+const backgroundBox = ref('');
+const backIcon = ref('white');
+const title = ref('');
 let total;
 const paramsId = {
   parentId: null,
@@ -240,6 +248,18 @@ const locationFiltering = (index) => {
       break;
   }
 };
+// 监听页面滚动
+onPageScroll((e) => {
+  if (e.scrollTop > 20) {
+    backgroundBox.value = '#fff';
+    backIcon.value = '';
+    title.value = '美食';
+  } else {
+    backgroundBox.value = '';
+    backIcon.value = 'white';
+    title.value = '';
+  }
+});
 </script>
 
 <style lang="scss" scoped>