往生大殿逝者记录4.0-内容区域可滑动

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
+    this.selectedUnitId = options.id
-    console.log('设置往生殿ID:', this.memorialId)
+    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}` - 获取往生殿详情

pages/memorial/memorialHall.vue

@@ -27,61 +27,69 @@
         <!-- 刻铭标题 -->
         <view class="title">刻铭</view>
 
-        <!-- 加载状态 -->
+        <!-- 滚动内容区域 -->
-        <view v-if="loading" class="loading-container">
+        <scroll-view 
-          <view class="loading-text">加载中...</view>
+          class="scroll-content" 
-        </view>
+          scroll-y="true"
-
+          :scroll-top="scrollTop"
-        <!-- 动态渲染往生者信息 -->
+          @scroll="onScroll"
-        <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 v-if="loading" class="loading-container">
-            <view class="fullName">{{ deceased.fullName }}</view>
+            <view class="loading-text">加载中...</view>
           </view>
-          <view class="date">
+
-            <view class="bornDate">
+          <!-- 动态渲染往生者信息 -->
-              <view>生</view>
+          <view 
-              <view>{{ deceased.bornYear }}</view>
+            v-else-if="deceasedList.length > 0"
-              <view class="time">年</view>
+            v-for="(deceased, index) in deceasedList" 
-              <view>{{ deceased.bornMonths }}</view>
+            :key="deceased.id"
-              <view class="time">月</view>
+            class="memorial-text"
-              <view>{{ deceased.bornDay }}</view>
+          >
-              <view class="time">日</view>
+            <view class="name">
+              <view class="honorific">{{ deceased.honorific }}</view>
+              <view class="fullName">{{ deceased.fullName }}</view>
             </view>
-            <view class="diedDate">
+            <view class="date">
-              <view>卒</view>
+              <view class="bornDate">
-              <view>{{ deceased.diedYear || '吉' }}</view>
+                <view>生</view>
-              <view class="time">年</view>
+                <view>{{ deceased.bornYear }}</view>
-              <view>{{ deceased.diedMonths || '吉利' }}</view>
+                <view class="time">年</view>
-              <view class="time">月</view>
+                <view>{{ deceased.bornMonths }}</view>
-              <view>{{ deceased.diedDay || '吉' }}</view>
+                <view class="time">月</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 v-else-if="!loading && deceasedList.length === 0" class="empty-container">
-          <view class="empty-text">暂无往生者信息</view>
+            <view class="empty-text">暂无往生者信息</view>
-        </view>
+          </view>
 
-        <!-- 联系人信息 -->
+          <!-- 联系人信息 -->
-        <view class="contact-info">
+          <view class="contact-info">
-          <view v-if="memorialDetail">
+            <view v-if="memorialDetail">
-            联系人：{{ memorialDetail.contactName || '暂无' }}（{{ memorialDetail.contactPhone || '暂无' }}）
+              联系人：{{ 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">
+        </scroll-view>
-            地址：{{ memorialDetail.address }}
-          </view>
-          <view v-else>
-            联系人：暂无联系信息
-          </view>
-        </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;
   }
 
 }