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 @@
刻铭
-
-
- 加载中...
-
-
-
-
+
-
- {{ deceased.honorific }}
- {{ deceased.fullName }}
+
+
+ 加载中...
-
-
- 生
- {{ deceased.bornYear }}
- 年
- {{ deceased.bornMonths }}
- 月
- {{ deceased.bornDay }}
- 日
+
+
+
+
+ {{ deceased.honorific }}
+ {{ deceased.fullName }}
-
- 卒
- {{ deceased.diedYear || '吉' }}
- 年
- {{ deceased.diedMonths || '吉利' }}
- 月
- {{ deceased.diedDay || '吉' }}
- 日
+
+
+ 生
+ {{ deceased.bornYear }}
+ 年
+ {{ deceased.bornMonths }}
+ 月
+ {{ deceased.bornDay }}
+ 日
+
+
+ 卒
+ {{ deceased.diedYear || '吉' }}
+ 年
+ {{ deceased.diedMonths || '吉利' }}
+ 月
+ {{ deceased.diedDay || '吉' }}
+ 日
+
-
-
-
- 暂无往生者信息
-
+
+
+ 暂无往生者信息
+
-
-
-
- 联系人：{{ memorialDetail.contactName || '暂无' }}（{{ memorialDetail.contactPhone || '暂无' }}）
+
+
+
+ 联系人：{{ memorialDetail.contactName || '暂无' }}（{{ memorialDetail.contactPhone || '暂无' }}）
+
+
+ 地址：{{ memorialDetail.address }}
+
+
+ 联系人：暂无联系信息
+
-
- 地址：{{ memorialDetail.address }}
-
-
- 联系人：暂无联系信息
-
-
+
@@ -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;
}
}