优化首页页面 完成顶部搜索栏和下方商品分类标签的吸顶效果

pages/index/index.css

@@ -1,3 +1,7 @@
+page{
+	overflow-y: hidden;
+}
+
 .not_found_404 {
 	display: flex;
 	flex-direction: column;
@@ -37,6 +41,13 @@
 	background-color: #f9f9f9;
 }
 
+.mainBox{
+	height: 80.5vh;
+	margin-top: 10rpx;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
 .hot-word-container {
 	width: 60%;
 	height: 50rpx;
@@ -79,7 +90,7 @@ page {
 .grid_Pic {
 	width: 80rpx;
 	height: 80rpx;
-	margin-bottom: 15rpx;
+	margin-bottom: 10rpx;
 }
 
 .searchBox {
@@ -87,6 +98,7 @@ page {
 	align-items: center;
 	background-color: #FFFFFF;
 	justify-content: space-between;
+	padding-bottom: 10rpx;
 }
 
 .searchBox_add {
@@ -497,6 +509,7 @@ page {
 	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 	overflow: hidden;
 	position: relative;
+	padding-top: 90rpx;
 }
 
 .tabs-container {
@@ -504,6 +517,7 @@ page {
 	padding: 0 20rpx;
 	position: relative;
 	align-items: center;
+	background-color: #FFFFFF;
 }
 
 .tabs-scroll {
@@ -522,7 +536,7 @@ page {
 .tab-item {
 	padding: 0 20rpx;
 	margin-right: 20rpx;
-	font-size: 20rpx;
+	font-size: 24rpx;
 	color: #333;
 	background-color: #ededed;
 	height: 50rpx;
@@ -623,7 +637,7 @@ page {
 
 .overlay {
 	position: absolute;
-	top: 90rpx;
+	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
@@ -739,6 +753,7 @@ page {
 	padding: 0 20rpx;
 	width: 100%;
 	box-sizing: border-box;
+	position: relative;
 }
 
 .merchantList2 {}

pages/index/index.vue

@@ -9,9 +9,8 @@
     </view>
     <view v-else>
       <view class="container" :style="{ marginTop: top + 'px' }" v-if="loading">
-        <view class="white_container">
         <!-- 城市信息部分 -->
-          <view class="searchBox" :style="{ height: localHeight + 'px' }">
+        <view class="white_container searchBox" :style="{ height: localHeight + 'px' }">
           <view class="searchBox_add" @tap="map">
             <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
             <view>
@@ -38,6 +37,8 @@
             </view>
           </view>
         </view>
+        <view class="mainBox" ref="mainBox">
+          <view class="white_container">
             <!-- 功能导航区 -->
             <view class="function-nav" v-if="showNav">
               <view class="function-item" @click="goToShop">
@@ -133,7 +134,7 @@
                   <view :class="['serverItem', `serverItem${index + 4}`]" @click="headerServerClick2(item)"
                     v-for="(item, index) in homeRightList2" :key="index">
                     <view class="serverTit">{{ item.title }}</view>
-                  <image :src="item.pic_src" mode="" />
+                    <image :src="item.pic_src" mode="aspectFill" />
                     <!-- <view>{{ item.ad_position }}</view> -->
                   </view>
                 </view>
@@ -146,8 +147,8 @@
       <image v-for="(item, index) in bottomList" :key="index" class="list_pic" :src="item.pic_src" mode="">
       </image>
     </view> -->
-        <!-- 分类标签栏 -->
+          <!-- 分类标签栏已移至mainBox下方作为子盒子，保持视觉位置不变 -->
-        <view class="category-tabs">
+          <u-sticky>
             <view class="tabs-container">
               <scroll-view scroll-x enable-flex class="tabs-scroll" :scroll-into-view="activeCategoryId">
                 <view class="tab-item" v-for="item in categoryList1" :key="item.id" :id="'category-' + item.id"
@@ -171,6 +172,7 @@
                 </view>
               </view>
             </view>
+          </u-sticky>
            
           <!-- 商家列表展示 -->
           <view class="merchantList" :class="{ merchantList2: merchatList.length < 3 }">
@@ -204,7 +206,8 @@
                     </view>
                   </view>
                   <view class="merchantItem_right_con_right" @click="toJump(item)">
-                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
+                    <image
+                      src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
                       mode="aspectFill"></image>
                     点评
                   </view>
@@ -215,7 +218,6 @@
               </view>
             </view>
           </view>
-        </view>
           
           <view class="more" v-if="flag">下拉加载后续10条，共计{{ bottomTotal }}条</view>
           <nav-footer />        
@@ -223,6 +225,8 @@
       </view>
     </view>
 
+  </view>
+
 
 </template>
 
@@ -1047,22 +1051,24 @@ export default {
 
       this.showDropdown = false;
       this.$nextTick(() => {
-        uni.pageScrollTo({
+        // 获取mainBox元素并使其滚动到底部
-          scrollTop: 1000,
+        const mainBox = this.$refs.mainBox;
-          duration: 300
+        if (mainBox) {
-        });
+          mainBox.scrollTop = 1000;
+        }
       });
     },
 
     toggleDropdown() {
       this.showDropdown = !this.showDropdown;
-      // 当展开下拉菜单时，页面滑动
+      // 当展开下拉菜单时，在mainBox内滑动
       if (this.showDropdown) {
         this.$nextTick(() => {
-          uni.pageScrollTo({
+          // 获取mainBox元素并使其滚动到底部
-            scrollTop: 1000,
+          const mainBox = this.$refs.mainBox;
-            duration: 300
+          if (mainBox) {
-          });
+            mainBox.scrollTop = 1000;
+          }
         })
       }
     },