一、实践方案
通过控制组件的是否可见属性和自定义方法来实现分步表单效果。
1. 在编辑器中，选择表单容器，绑定数据模型/APIs 生成表单后，改变大纲书结构，使其表单组件分为三个模块，分别命名为 block1、block2、block3（模拟上下页的效果）。
2. 在表单容器底部，并放入两个按钮，按钮名称分别为：上一页、下一页。
3. 新建相关变量和方法。
·count_block：当前表单模块的索引，类型为数字，默认是1。
·status_block1、status_block2、status_block3：控制当前模块的显隐，类型为布尔值。
·prev_block：上一页事件方法。
·next_block：下一页事件方法。
4. 模拟翻页场景。
·表单模块 block1 条件展示绑定表达式。
·隐藏表单模块 block2。
·隐藏表单模块 block3。
·首页默认隐藏上一页按钮，当表单模块索引 count_block 大于1的时候，即当前停留在其他区块，可显示上一页按钮。
·整体布局效果展示。
·下一页按钮绑定自定义 js 事件 next_block，在方法中实现变量模块索引 count_block 的改变以及模块变量显隐状态 status_block 的改变。
export default function ({ event, data }) { $w.page.dataset.state.count_block++ let count = $w.page.dataset.state.count_block if (count == 2) { $w.page.dataset.state.status_block2 = true $w.page.dataset.state.status_block1 = false $w.page.dataset.state.status_block3 = false } else if (count == 3) { $w.page.dataset.state.status_block2 = false $w.page.dataset.state.status_block1 = false $w.page.dataset.state.status_block3 = true } else { $w.page.dataset.state.status_block2 = false $w.page.dataset.state.status_block1 = true $w.page.dataset.state.status_block3 = false }}
·上一页按钮绑定自定义 js 事件 prev_block，在方法中实现变量模块索引 count_block 的改变以及模块变量显隐状态 status_block 的改变。
export default function ({ event, data }) { $w.page.dataset.state.count_block– let count = $w.page.dataset.state.count_block if (count == 2) { $w.page.dataset.state.status_block2 = true $w.page.dataset.state.status_block1 = false $w.page.dataset.state.status_block3 = false } else { $w.page.dataset.state.status_block2 = false $w.page.dataset.state.status_block1 = true $w.page.dataset.state.status_block3 = false }}
二、效果展示
完成以上配置，即可实现分步表单效果。
1. 默认展示第一部分的表单内容。
2. 填写内容后单击下一页，会打开下一页表单内容。
3. 尾页表单内容展示。
4. 单击上一页，会返回上一页的表单内容。