# 往生殿页面跳转功能测试 ## 功能描述 从memorial页面点击"供奉"按钮后,跳转到memorialHall页面,并传递往生殿ID进行页面渲染。memorialHall页面具有固定容器高度和可滚动的内容区域。 ## 跳转流程 ### 1. 起始页面:memorial.vue - **路径**: `/pages/memorial/memorial` - **功能**: 往生殿列表页面 - **触发方式**: 点击底部"供奉"按钮 ### 2. 目标页面:memorialHall.vue - **路径**: `/pages/memorial/memorialHall` - **功能**: 往生大殿详情页面 - **接收参数**: `id` - 往生殿ID - **特色功能**: 固定容器高度,内容区域可滚动 ## 实现细节 ### memorial.vue 中的跳转逻辑 ```javascript // 提交供奉 - 跳转到往生大殿页面 submitPrayer() { console.log('提交供奉,跳转到往生大殿页面,ID:', this.memorialId) // 跳转到往生大殿页面,传递往生殿ID uni.navigateTo({ url: `/pages/memorial/memorialHall?id=${this.memorialId}`, success: () => { console.log('跳转成功') }, fail: (error) => { console.error('跳转失败:', error) uni.showToast({ title: '页面跳转失败', icon: 'none' }) } }) } ``` ### memorialHall.vue 中的参数接收和滚动功能 ```javascript onLoad(options) { console.log('memorialHall页面接收到的参数:', options) // 从路由参数获取往生殿ID if (options.id) { this.selectedUnitId = options.id console.log('区域ID:', this.selectedUnitId) } else { console.warn('未接收到区域ID,使用默认ID:', this.selectedUnitId) } this.initPage() } , // 滚动事件处理 onScroll(e) { console.log('滚动位置:', e.detail.scrollTop) this.scrollTop = e.detail.scrollTop } ``` ## 测试步骤 ### 1. 进入memorial页面 ```javascript // 可以通过以下方式进入memorial页面 uni.navigateTo({ url: '/pages/memorial/memorial?id=16', }) ``` ### 2. 点击供奉按钮 - 在memorial页面底部找到"供奉"按钮 - 点击按钮触发跳转 ### 3. 验证跳转结果 - 页面应该跳转到memorialHall页面 - 控制台应该显示接收到的参数 - 页面应该根据传递的ID加载对应的往生殿信息 - 内容区域应该可以垂直滚动 ### 4. 测试滚动功能 - 当往生者列表内容超出容器高度时,可以上下滚动查看 - 滚动时控制台会显示滚动位置信息 - 容器高度保持固定,不会随内容变化 ## 预期结果 ### 成功跳转时: 1. 页面从memorial跳转到memorialHall 2. 控制台显示: ``` memorialHall页面接收到的参数: {id: "16"} 设置往生殿ID: 16 往生殿页面初始化,ID: 16 ``` 3. memorialHall页面根据ID加载对应的往生殿详情和往生者列表 ### 跳转失败时: 1. 显示错误提示:"页面跳转失败" 2. 控制台显示具体错误信息 ## 调试信息 ### 控制台日志 - `memorialHall页面接收到的参数:` - 显示接收到的所有参数 - `区域ID:` - 显示设置的往生殿ID - `往生大殿页面初始化,ID:` - 显示页面初始化时的ID - `往生殿详情响应:` - 显示API响应数据 - `往生者列表数据:` - 显示往生者列表数据 - `滚动位置:` - 显示当前滚动位置 ### 网络请求 - `GET /app/memorial/{id}` - 获取往生殿详情 - `GET /app/deceased/list` - 获取往生者列表 ## 注意事项 1. **ID传递**: 确保memorial页面的memorialId变量有正确的值 2. **页面配置**: 确保pages.json中两个页面都已正确配置 3. **API接口**: 确保后端API接口正常工作 4. **网络连接**: 确保网络连接正常,能够访问API ## 错误排查 ### 常见问题: 1. **页面跳转失败**: 检查pages.json配置 2. **ID未传递**: 检查memorial页面的memorialId变量 3. **数据加载失败**: 检查API接口和网络连接 4. **页面显示异常**: 检查memorialHall页面的模板和样式 ### 调试方法: 1. 查看控制台日志 2. 检查网络请求 3. 验证API响应数据 4. 检查页面参数传递