# 移动端页面如何实现简历的分步骤填写

来源快照：`result_data_new_260518.json`

- 来源 ID：`1968491390307827749`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.****场景说明**

简历投递分为选择投递岗位、完善个人信息和基础调查三个填报步骤，三个步骤完成之后可以通过点击提交按钮上传简历信息，在此之前可以通过点击上/下一步切换步骤，编辑已经填报的内容。

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705540017348615&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**  
**

**2.****功能简介**

通过**按钮动作** ，**显示/隐藏组件** ，实现点击按钮切换步骤时在页面上显示不同的组件。

  


**3.****操作说明**

 1、添加三个步骤条组件，步骤都是投递岗位、个人信息和基础调查，随后3个步骤条分别将步骤1、步骤2、步骤3设为当前所处步骤，如图1所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705539869179943&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

             图1 添加3个步骤条，分别将步骤1，步骤2和步骤3设为当前所处步骤  


  


2、添加中间件组件、3个步骤中所有需要录入数据的字段组件和表单按钮，其中表单字段组件和表单按钮都要关联中间表，如图2所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705539869179954&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图2 添加中间表、录入简历信息的表单字段组件和表单按钮

  


3、添加三个页头组件，标题分别为投递岗位、个人信息和基础调查。其中投递岗位的页头按钮为下一步，点击改按钮后触发执行动作**【显示/隐藏组件】** ，处在步骤2的步骤条、个人信息页头和个人信息相关字段组件显示，其他页面组件隐藏，如图3所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705544147369998&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图3 添加页头组件，配置标题、页头按钮和按钮点击事件，实现点击按钮时切换页面显示内容

        个人信息页头组件，页头按钮为上一步和下一步，点击上一步时处在步骤1的步骤条、投递岗位页头和投递岗位相关表单字段组件显示，其他页面组件隐藏，点击下一步时处在步骤3的步骤条、基础调查页头、基础调查相关表单字段组件和表单提交/暂存按钮显示，其余页面组件隐藏；

        基础调查页头组件，页头按钮为上一步，点击时处在步骤2的步骤条、个人信息页头和个人信息相关表单字段组件显示，其余页面组件隐藏。  


  


4、页面打开时默认显示处在步骤1的步骤条、投递岗位页头和投递岗位相关的表单字段组件。在处于步骤1的步骤条组件上添加事件，组件加载完成时仅显示处在步骤1的步骤条、投递岗位页头和投递岗位相关的表单字段组件，其余页面组件隐藏，如图4所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705544180039708&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图4 页面打开时默认显示处在步骤1的步骤条、投递岗位页头和投递岗位相关的表单字段组件

  


5、分步骤填报简历信息的显示效果如图5所示:

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705548582117382&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图5 分步骤填报的显示效果
