From 2a7e874ae3415138d6404fc0a8a755c87097ccb4 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Mon, 11 Aug 2025 11:37:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=80=E7=94=9F=E5=A4=A7=E6=AE=BF=E9=80=9D?=
 =?UTF-8?q?=E8=80=85=E8=AE=B0=E5=BD=954.0-=E5=86=85=E5=AE=B9=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E5=8F=AF=E6=BB=91=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 MEMORIAL_NAVIGATION_TEST.md     |  28 ++++++--
 pages/memorial/memorialHall.vue | 123 +++++++++++++++++++-------------
 2 files changed, 95 insertions(+), 56 deletions(-)

diff --git a/MEMORIAL_NAVIGATION_TEST.md b/MEMORIAL_NAVIGATION_TEST.md
index fe89a8e..35f610b 100644
--- a/MEMORIAL_NAVIGATION_TEST.md
+++ b/MEMORIAL_NAVIGATION_TEST.md
@@ -1,7 +1,7 @@
 # 往生殿页面跳转功能测试
 
 ## 功能描述
-从memorial页面点击"供奉"按钮后，跳转到memorialHall页面，并传递往生殿ID进行页面渲染。
+从memorial页面点击"供奉"按钮后，跳转到memorialHall页面，并传递往生殿ID进行页面渲染。memorialHall页面具有固定容器高度和可滚动的内容区域。
 
 ## 跳转流程
 
@@ -14,6 +14,7 @@
 - **路径**: `/pages/memorial/memorialHall`
 - **功能**: 往生大殿详情页面
 - **接收参数**: `id` - 往生殿ID
+- **特色功能**: 固定容器高度，内容区域可滚动
 
 ## 实现细节
 
@@ -40,18 +41,24 @@ submitPrayer() {
 }
 ```
 
-### memorialHall.vue 中的参数接收
+### memorialHall.vue 中的参数接收和滚动功能
 ```javascript
 onLoad(options) {
   console.log('memorialHall页面接收到的参数:', options)
   // 从路由参数获取往生殿ID
   if (options.id) {
-    this.memorialId = options.id
-    console.log('设置往生殿ID:', this.memorialId)
+    this.selectedUnitId = options.id
+    console.log('区域ID:', this.selectedUnitId)
   } else {
-    console.warn('未接收到往生殿ID，使用默认ID:', this.memorialId)
+    console.warn('未接收到区域ID，使用默认ID:', this.selectedUnitId)
   }
   this.initPage()
+},
+
+// 滚动事件处理
+onScroll(e) {
+  console.log('滚动位置:', e.detail.scrollTop)
+  this.scrollTop = e.detail.scrollTop
 }
 ```
 
@@ -73,6 +80,12 @@ uni.navigateTo({
 - 页面应该跳转到memorialHall页面
 - 控制台应该显示接收到的参数
 - 页面应该根据传递的ID加载对应的往生殿信息
+- 内容区域应该可以垂直滚动
+
+### 4. 测试滚动功能
+- 当往生者列表内容超出容器高度时，可以上下滚动查看
+- 滚动时控制台会显示滚动位置信息
+- 容器高度保持固定，不会随内容变化
 
 ## 预期结果
 
@@ -94,10 +107,11 @@ uni.navigateTo({
 
 ### 控制台日志
 - `memorialHall页面接收到的参数:` - 显示接收到的所有参数
-- `设置往生殿ID:` - 显示设置的往生殿ID
-- `往生殿页面初始化，ID:` - 显示页面初始化时的ID
+- `区域ID:` - 显示设置的往生殿ID
+- `往生大殿页面初始化，ID:` - 显示页面初始化时的ID
 - `往生殿详情响应:` - 显示API响应数据
 - `往生者列表数据:` - 显示往生者列表数据
+- `滚动位置:` - 显示当前滚动位置
 
 ### 网络请求
 - `GET /app/memorial/{id}` - 获取往生殿详情
diff --git a/pages/memorial/memorialHall.vue b/pages/memorial/memorialHall.vue
index 1b0a358..e0ad3f8 100644
--- a/pages/memorial/memorialHall.vue
+++ b/pages/memorial/memorialHall.vue
@@ -27,61 +27,69 @@
         <!-- 刻铭标题 -->
         <view class="title">刻铭</view>
 
-        <!-- 加载状态 -->
-        <view v-if="loading" class="loading-container">
-          <view class="loading-text">加载中...</view>
-        </view>
-
-        <!-- 动态渲染往生者信息 -->
-        <view 
-          v-else-if="deceasedList.length > 0"
-          v-for="(deceased, index) in deceasedList" 
-          :key="deceased.id"
-          class="memorial-text"
+        <!-- 滚动内容区域 -->
+        <scroll-view 
+          class="scroll-content" 
+          scroll-y="true"
+          :scroll-top="scrollTop"
+          @scroll="onScroll"
         >
-          <view class="name">
-            <view class="honorific">{{ deceased.honorific }}</view>
-            <view class="fullName">{{ deceased.fullName }}</view>
+          <!-- 加载状态 -->
+          <view v-if="loading" class="loading-container">
+            <view class="loading-text">加载中...</view>
           </view>
-          <view class="date">
-            <view class="bornDate">
-              <view>生</view>
-              <view>{{ deceased.bornYear }}</view>
-              <view class="time">年</view>
-              <view>{{ deceased.bornMonths }}</view>
-              <view class="time">月</view>
-              <view>{{ deceased.bornDay }}</view>
-              <view class="time">日</view>
+
+          <!-- 动态渲染往生者信息 -->
+          <view 
+            v-else-if="deceasedList.length > 0"
+            v-for="(deceased, index) in deceasedList" 
+            :key="deceased.id"
+            class="memorial-text"
+          >
+            <view class="name">
+              <view class="honorific">{{ deceased.honorific }}</view>
+              <view class="fullName">{{ deceased.fullName }}</view>
             </view>
-            <view class="diedDate">
-              <view>卒</view>
-              <view>{{ deceased.diedYear || '吉' }}</view>
-              <view class="time">年</view>
-              <view>{{ deceased.diedMonths || '吉利' }}</view>
-              <view class="time">月</view>
-              <view>{{ deceased.diedDay || '吉' }}</view>
-              <view class="time">日</view>
+            <view class="date">
+              <view class="bornDate">
+                <view>生</view>
+                <view>{{ deceased.bornYear }}</view>
+                <view class="time">年</view>
+                <view>{{ deceased.bornMonths }}</view>
+                <view class="time">月</view>
+                <view>{{ deceased.bornDay }}</view>
+                <view class="time">日</view>
+              </view>
+              <view class="diedDate">
+                <view>卒</view>
+                <view>{{ deceased.diedYear || '吉' }}</view>
+                <view class="time">年</view>
+                <view>{{ deceased.diedMonths || '吉利' }}</view>
+                <view class="time">月</view>
+                <view>{{ deceased.diedDay || '吉' }}</view>
+                <view class="time">日</view>
+              </view>
             </view>
           </view>
-        </view>
 
-        <!-- 空数据提示 -->
-        <view v-else-if="!loading && deceasedList.length === 0" class="empty-container">
-          <view class="empty-text">暂无往生者信息</view>
-        </view>
+          <!-- 空数据提示 -->
+          <view v-else-if="!loading && deceasedList.length === 0" class="empty-container">
+            <view class="empty-text">暂无往生者信息</view>
+          </view>
 
-        <!-- 联系人信息 -->
-        <view class="contact-info">
-          <view v-if="memorialDetail">
-            联系人：{{ memorialDetail.contactName || '暂无' }}（{{ memorialDetail.contactPhone || '暂无' }}）
+          <!-- 联系人信息 -->
+          <view class="contact-info">
+            <view v-if="memorialDetail">
+              联系人：{{ memorialDetail.contactName || '暂无' }}（{{ memorialDetail.contactPhone || '暂无' }}）
+            </view>
+            <view v-if="memorialDetail && memorialDetail.address">
+              地址：{{ memorialDetail.address }}
+            </view>
+            <view v-else>
+              联系人：暂无联系信息
+            </view>
           </view>
-          <view v-if="memorialDetail && memorialDetail.address">
-            地址：{{ memorialDetail.address }}
-          </view>
-          <view v-else>
-            联系人：暂无联系信息
-          </view>
-        </view>
+        </scroll-view>
       </view>
 
       <!-- 状态栏 -->
@@ -138,7 +146,7 @@ export default {
         unit: null
       },
       // 当前选中的单元ID，用于状态栏查询
-      selectedUnitId: '16',
+      selectedUnitId: '',
       // 往生者列表数据
       deceasedList: [],
       // 分页参数
@@ -147,7 +155,9 @@ export default {
         pageSize: 10
       },
       // 往生殿详情数据
-      memorialDetail: null
+      memorialDetail: null,
+      // 滚动相关
+      scrollTop: 0
     }
   },
   onLoad(options) {
@@ -291,6 +301,12 @@ export default {
           icon: 'none'
         })
       }
+    },
+
+    // 滚动事件处理
+    onScroll(e) {
+      console.log('滚动位置:', e.detail.scrollTop)
+      this.scrollTop = e.detail.scrollTop
     }
   }
 }
@@ -317,6 +333,8 @@ export default {
   //border: 1px  red solid;
   height: 862rpx;
   padding:34rpx 32rpx 0 32rpx;
+  display: flex;
+  flex-direction: column;
   .memorial-header {
     display: flex;
     justify-content: space-between;
@@ -355,6 +373,12 @@ export default {
     //border: 1px  red solid;
   }
 
+  .scroll-content {
+    flex: 1;
+    height: 0; // 让flex: 1生效
+    overflow: hidden;
+  }
+
   .loading-container {
     display: flex;
     justify-content: center;
@@ -450,6 +474,7 @@ export default {
     line-height: 38rpx;
     letter-spacing: 1px;
     text-align: left;
+    padding-bottom: 32rpx;
   }
 
 }