(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210848861.X (22)申请日 2022.07.19 (71)申请人 支付宝 （杭州） 信息技 术有限公司 地址 310000 浙江省杭州市西湖区西溪路 556号8层B段801-1 1 (72)发明人 蒋吉麟　 (74)专利代理 机构 北京市一法律师事务所 11654 专利代理师 李琳娜　刘荣娟 (51)Int.Cl. G06F 16/957(2019.01) G06F 9/451(2018.01) (54)发明名称 前端元素对齐的方法和系统 (57)摘要 本说明书提供的前端元素对齐的方法和系 统， 获取前端元素对应的元素配置信息之后， 便 可以基于元素配置信息， 迭代执行对齐操作， 该 对齐操作为将 对齐元素与被对齐元素进行对齐， 然后， 输出目标对齐后元素； 由于该方案可以通 过迭代执行对齐操作的方式， 可以实现在动态调 整前端元素的位置或方位， 使得在对齐过程中可 以进行更加灵活的空间位置变换， 因此， 可以提 升前端元 素对齐的对齐效率。 权利要求书2页 说明书13页 附图4页 CN 115130033 A 2022.09.30 CN 115130033 A 1.前端元 素对齐方法， 包括： 获取前端元素对应的元素配置信 息， 所述前端元素包括对齐元素与 所述对齐元素对应 的被对齐元 素； 基于所述元素配置信息， 迭代执行对齐操作， 所述对齐操作为将所述对齐元素与所述 被对齐元 素进行对齐； 以及 输出目标对齐后元 素。 2.根据权利要求1所述的前端元素对齐方法， 其中， 所述对齐元素包括提示框和选择框 的下拉弹出框中的至少一种。 3.根据权利要求1所述的前端元素对齐方法， 其中， 所述迭代执行对齐操作包括： 执行 所述对齐操作直至 达到预设迭代次数。 4.根据权利要求1所述的前端元素对齐方法， 其中， 所述迭代执行对齐操作包括： 执行 对齐操作直至所述对齐元 素达到预设对齐效果。 5.根据权利要求1所述的前端元素对齐方法， 其中， 所述基于所述元素配置信息， 迭代 执行对齐操作， 包括： 基于所述元 素配置信息， 确定所述对齐元 素对应的对齐尺寸； 以及 基于所述对齐尺寸和所述元 素配置信息， 迭代执 行对齐操作。 6.根据权利要求5所述的前端元素对齐方法， 其中， 所述基于所述元素配置信息， 确定 所述对齐元 素对应的对齐尺寸， 包括： 基于所述元 素配置信息， 确定所述对齐元 素对应的对齐 类型为非固定对齐； 以及 对所述被对齐元 素的尺寸进行测量， 得到所述对齐元 素对应的对齐尺寸。 7.根据权利要求5所述的前端元素对齐方法， 其中， 所述基于所述元素配置信息， 确定 所述对齐元 素对应的对齐尺寸， 包括： 基于所述元 素配置信息， 确定所述对齐元 素对应的对齐 类型为固定对齐； 以及 基于所述元 素配置信息， 获取 所述对齐元 素对应的对齐尺寸。 8.根据权利要求5所述的前端元 素对齐方法， 其中， 所述对齐操作， 包括： 基于所述被对齐元素的位置和所述对齐元素的当前尺寸， 获取所述对齐元素的当前对 齐位置； 将所述对齐元素移动至所述当前对齐位置， 并对所述对齐元素的样式进行更新， 得到 候选对齐后元 素； 将所述候选对齐后元 素更新为所述对齐元 素； 以及 将所述候选对齐后元 素的尺寸更新 为所述对齐元 素的当前尺寸。 9.根据权利要求8所述的前端元素对齐方法， 其中， 所述对所述对齐元素的样式进行更 新， 得到候选对齐后元 素， 包括： 确定所述元 素配置信息包括更新样式信息； 以及 基于所述当前对齐位置， 在所述对齐元素上添加目标样式， 得到候选对齐后元素， 所述 目标样式为所述更新样式信息对应的元 素样式。 10.根据权利要求8所述的前端元素对齐方法， 其中， 所述对所述对齐元素的样式进行 更新， 得到候选对齐后元 素， 包括： 确定所述元 素配置信息不包括更新样式信息； 以及权　利　要　求　书 1/2 页 2 CN 115130033 A 2将所述对齐元 素作为所述 候选对齐后元 素。 11.根据权利要求5所述的前端元素对齐方法， 其中， 所述迭代执行对齐操作包括初始 化对齐操作， 所述初始化对齐操作包括： 绘制所述对齐尺寸对应的初始对齐元 素； 以及 将所述初始对齐元 素的显示状态设置为透明状态， 得到所述对齐元 素。 12.根据权利要求1所述的前端元 素对齐方法， 其中， 所述输出目标对齐后元 素， 包括： 将所述迭代执 行对齐操作中最后一次对齐操作更新的对齐元 素作为目标对齐后元 素； 基于所述元 素配置信息， 对所述目标对齐后元 素进行动画渲染； 以及 输出动画渲染后的目标对齐后元 素。 13.根据权利要求12所述的前端元素对齐方法， 其中， 所述基于所述元素配置信息， 对 所述目标对齐后元 素进行动画渲染， 包括： 将所述目标对齐后元 素的显示状态调整为可 见状态； 基于所述元 素配置信息， 确定所述目标对齐后元 素的目标动画渲染逻辑； 以及 基于所述目标动画渲染逻辑， 对可 见状态下的目标对齐后元 素进行动画过渡。 14.根据权利要求13所述的前端元素对齐方法， 其中， 所述基于所述元素配置信息， 确 定所述目标对齐后元 素的目标动画渲染逻辑， 包括： 确定所述元 素配置信息中包括动画渲染逻辑更新信息； 以及 基于所述动画渲染逻辑更新信 息， 对所述目标对齐后元素的预设动画渲染逻辑进行更 新， 得到所述目标动画渲染逻辑。 15.根据权利要求13所述的前端元素对齐方法， 其中， 所述基于所述目标动画渲染逻 辑， 对可见状态下的目标对齐后元 素进行动画过渡之后， 还 包括： 生成过渡完成事 件； 以及 基于所述过渡完成事 件， 对所述元 素配置信息对应的注入内容进行清理。 16.根据权利要求12所述的前端元素对齐方法， 其中， 所述输出动画渲染后的目标对齐 后元素， 包括： 对所述动画渲染后的目标对齐后元 素进行可视化展示。 17.一种前端元 素对齐系统， 包括： 至少一个存 储介质， 存 储有至少一个指令集， 用于进行 前端元素对齐； 以及 至少一个处 理器， 同所述至少一个存 储介质通信连接， 其中， 当所述前端元素对齐系统运行时， 所述至少一个处理器读取所述至少一个指令 集， 并且根据所述至少一个指 令集的指示执行权利要求 1‑16中任一项 所述的前端 元素对齐 的方法。权　利　要　求　书 2/2 页 3 CN 115130033 A 3