fix: restore home activity category scrolling

pages/home.vue

@@ -8,7 +8,7 @@
 			</template>
 		</up-navbar>
 		<image src="https://oss.familydaf.cn/sxsnfile/20251218/ee40161fef4647f0b736d118e554dc2f.png" class="top_bg_img" mode="widthFix"></image>
-		<view class="c-box adffc">
+		<scroll-view class="c-box adffc" scroll-y="true" @scrolltolower="scrolltolower">
 				<view class="c-box-search">
 				<cus-search @handleSearch="toSearch"></cus-search>
 			</view>
@@ -54,17 +54,15 @@
 					<view class="typegrid-dot" v-for="(_, i) in typeGridPages" :key="i" :class="{'active': i === gridIndex}"></view>
 				</view>
 			</view>
-			<view class="c-box-list" v-if="activityList.length">
-				<up-list @scrolltolower="scrolltolower" style="height: 100%;">
-					<up-list-item v-for="(item, index) in activityList" :key="item.id">
-						<NonprofitActivety :item="item" :index="index"></NonprofitActivety>
-					</up-list-item>
-				</up-list>
+			<view class="c-box-list" v-if="activityList.length">
+				<view class="activity-list-item" v-for="(item, index) in activityList" :key="item.id">
+						<NonprofitActivety :item="item" :index="index"></NonprofitActivety>
+				</view>
 			</view>
 			<view class="dataEmpty" v-else>
 				<page-empty></page-empty>
 			</view>
-		</view>
+		</scroll-view>
 		<login-register></login-register>
 		<CusTabbar :tabbarIndex="0"></CusTabbar>
 	</view>
@@ -137,8 +135,8 @@
 		userId:''
 	})
 
-	// 图标网格分页：每页 4 个（单行），超过则分多页
-	const TYPEGRID_PAGE_SIZE = 4
+	// 图标网格分页：每页 8 个（4 列 × 2 行），超过则分多页
+	const TYPEGRID_PAGE_SIZE = 8
 	const typeGridPages = computed(() => {
 		const pages = []
 		const list = typeGrid.value || []
@@ -198,7 +196,7 @@
 	const getTypeList = () => {
 		proxy.$api.get('/core/activity/category/list').then(({data:res})=>{
 			if(res.code!==0) return proxy.$showToast(res.msg)
-			// icon 网格：取所有配过 icon 的分类；超过 4 个会自动分页
+			// icon 网格：取所有配过 icon 的分类；超过 8 个会自动分页
 			typeGrid.value = res.data.filter(d=>d.iconUrl).map(d=>({id:d.id,name:d.categoryName,iconUrl:d.iconUrl}));
 			gridIndex.value = 0
 		})
@@ -310,9 +308,9 @@
 
 	.tab_page{
 		.c-box{
-			width: 100%;
-			height: 100%;
-			overflow-y: auto;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
 			position: relative;
 			&-search{
 				width: 100%;
@@ -348,20 +346,24 @@
 					line-height: 33rpx;
 				}
 			}
-			&-typegrid{
-				width: 100%;
-				margin-top: 36rpx;
-				padding: 0 0;
-				box-sizing: border-box;
-				.typegrid-swiper{
-					width: 100%;
-					height: 180rpx;
-				}
+			&-typegrid{
+				width: 100%;
+				margin-top: 36rpx;
+				padding: 8rpx 0;
+				box-sizing: border-box;
+				position: sticky;
+				top: 0;
+				z-index: 10;
+				background: #FFFFFF;
+				.typegrid-swiper{
+					width: 100%;
+					height: 360rpx;
+				}
 				.typegrid-page{
 					width: 100%;
 					height: 100%;
 					display: flex;
-					flex-wrap: nowrap;
+					flex-wrap: wrap;
 				}
 				.typegrid-item{
 					width: 25%;
@@ -404,12 +406,13 @@
 					}
 				}
 			}
-			&-list{
-				width: 100%;
-				flex: 1;
-				overflow-y: auto;
-				margin-top: 20rpx;
-			}
+			&-list{
+				width: 100%;
+				margin-top: 20rpx;
+			}
+			.activity-list-item{
+				width: 100%;
+			}
 		}
 	}
 </style>

tests/home-activity-category-layout.test.js

@@ -5,10 +5,10 @@ import path from 'node:path'
 
 const homeFile = path.resolve('pages/home.vue')
 
-test('首页活动分类每页只展示一行四个图标', () => {
+test('首页活动分类每页展示两行八个图标', () => {
   const source = fs.readFileSync(homeFile, 'utf8')
 
-  assert.match(source, /const TYPEGRID_PAGE_SIZE\s*=\s*4/)
-  assert.match(source, /\.typegrid-swiper\s*\{[\s\S]*?height:\s*180rpx/)
-  assert.match(source, /\.typegrid-page\s*\{[\s\S]*?flex-wrap:\s*nowrap/)
+  assert.match(source, /const TYPEGRID_PAGE_SIZE\s*=\s*8/)
+  assert.match(source, /\.typegrid-swiper\s*\{[\s\S]*?height:\s*360rpx/)
+  assert.match(source, /\.typegrid-page\s*\{[\s\S]*?flex-wrap:\s*wrap/)
 })

tests/home-scroll-sticky-category.test.js

@@ -0,0 +1,16 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import fs from 'node:fs'
+import path from 'node:path'
+
+const homeFile = path.resolve('pages/home.vue')
+
+test('首页使用单一滚动容器并让两行活动分类吸顶', () => {
+  const source = fs.readFileSync(homeFile, 'utf8')
+
+  assert.match(source, /const TYPEGRID_PAGE_SIZE\s*=\s*8/)
+  assert.match(source, /<scroll-view class="c-box adffc"[^>]*scroll-y[^>]*@scrolltolower="scrolltolower"/)
+  assert.match(source, /<view class="typegrid-page[\s\S]*?flex-wrap:\s*wrap/)
+  assert.match(source, /&-typegrid\s*\{[\s\S]*?position:\s*sticky[\s\S]*?top:\s*0/)
+  assert.doesNotMatch(source, /<up-list[\s\S]*?@scrolltolower="scrolltolower"/)
+})