[发明专利]适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质

说明书

本发明公开了一种适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质，涉及表单页面展示技术领域。该方法是先实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，若触发，则依次获取表单展示屏的当前屏幕宽度、表单页面的内容区域宽度、单行表单元素可展示数目和单个表单元素可展示宽度，根据表单页面的表单元素总数与单行可展示表单元素数目的比较结果，判断表单页面的所有表单元素是否需要换行展示，在需要时根据单个表单元素可展示宽度，使用弹性盒子在所述表单展示屏中换行展示所有表单元素，如此可使表单页面能够随着表单展示屏的尺寸大小变化情况而进行自动适配展示，保障用户对表单数据的感知体验。

技术领域

本发明属于表单页面展示技术领域，具体涉及一种适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质。

背景技术

业务系统是指企业达成定位所需要的业务环节、各合作伙伴扮演的角色以及利益相关者合作与交易的方式和内容。在用户通过用户终端向业务系统的后台服务器发起服务请求的过程中，常常需要所述用户终端对反馈的表单数据进行基于UI(User Interface，用户界面)页面形式的输出展示。为了确保用户对表单数据的感知体验，如何使表单页面(即用于展示表单数据的UI页面)与展示屏幕相适配是非常重要的一个技术关键点。

当前市面上的业务系统项目主要提供的是使表单页面与单屏幕相适配的静态适配展示方案，即由于单屏幕的尺寸大小是固定不变的，因此在初步适配后，表单页面适配展示策略是无需调整的。然而随着屏幕展示技术的进一步发展，又出现了实现在同一设备上进行左右分屏展示的双屏幕展示方案。在所述双屏幕展示方案中，左侧屏幕和右侧屏幕均可分别独立展示相同或不同的表单页面，以及该左侧屏幕和该右侧屏幕的尺寸大小可通过拖动中间分界线左移或右移的方式进行动态调整，此时若仍采用现有的静态适配展示方案，将会导致表单页面与左/右侧屏幕出现失配的情况，进而影响表单页面适配展示效果以及用户对表单数据的感知体验。因此如何提供一种适用于左右双屏的表单页面自适配展示方案，以便使表单页面与左/右侧屏幕能够自动适配，保障用户对表单数据的感知体验，是本领域技术人员亟需研究的课题。

发明内容

本发明的目的是提供一种适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质，用以解决现有静态适配展示技术在应用于双屏幕展示方案时所存在会导致表单页面与左/右侧屏幕出现失配情况，进而影响表单页面适配展示效果以及用户对表单数据的感知体验的问题。

为了实现上述目的，本发明采用以下技术方案：

第一方面，提供了一种适用于左右双屏的表单页面自适配展示方法，包括：

实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕；

若触发，则获取所述表单展示屏的当前屏幕宽度；

根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度；

根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度；

根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示；

若需要，则根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。