CN116578219A - 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质 - Google Patents

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

Info

Publication number
CN116578219A
CN116578219A CN202310481320.2A CN202310481320A CN116578219A CN 116578219 A CN116578219 A CN 116578219A CN 202310481320 A CN202310481320 A CN 202310481320A CN 116578219 A CN116578219 A CN 116578219A
Authority
CN
China
Prior art keywords
screen
width
display
elements
current
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202310481320.2A
Other languages
English (en)
Other versions
CN116578219B (zh
Inventor
刘欣毅
韩云欢
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Insight Network Co ltd
Original Assignee
Beijing Insight Network Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Insight Network Co ltd filed Critical Beijing Insight Network Co ltd
Priority to CN202310481320.2A priority Critical patent/CN116578219B/zh
Publication of CN116578219A publication Critical patent/CN116578219A/zh
Application granted granted Critical
Publication of CN116578219B publication Critical patent/CN116578219B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1423—Digital output to display device ; Cooperation and interconnection of the display device with other functional units controlling a plurality of local displays, e.g. CRT and flat panel display
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

适用于左右双屏的表单页面自适配展示方法、装置、计算机设 备及计算机可读存储介质
技术领域
本发明属于表单页面展示技术领域，具体涉及一种适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质。
背景技术
业务***是指企业达成定位所需要的业务环节、各合作伙伴扮演的角色以及利益相关者合作与交易的方式和内容。在用户通过用户终端向业务***的后台服务器发起服务请求的过程中，常常需要所述用户终端对反馈的表单数据进行基于UI(User Interface，用户界面)页面形式的输出展示。为了确保用户对表单数据的感知体验，如何使表单页面(即用于展示表单数据的UI页面)与展示屏幕相适配是非常重要的一个技术关键点。
当前市面上的业务***项目主要提供的是使表单页面与单屏幕相适配的静态适配展示方案，即由于单屏幕的尺寸大小是固定不变的，因此在初步适配后，表单页面适配展示策略是无需调整的。然而随着屏幕展示技术的进一步发展，又出现了实现在同一设备上进行左右分屏展示的双屏幕展示方案。在所述双屏幕展示方案中，左侧屏幕和右侧屏幕均可分别独立展示相同或不同的表单页面，以及该左侧屏幕和该右侧屏幕的尺寸大小可通过拖动中间分界线左移或右移的方式进行动态调整，此时若仍采用现有的静态适配展示方案，将会导致表单页面与左/右侧屏幕出现失配的情况，进而影响表单页面适配展示效果以及用户对表单数据的感知体验。因此如何提供一种适用于左右双屏的表单页面自适配展示方案，以便使表单页面与左/右侧屏幕能够自动适配，保障用户对表单数据的感知体验，是本领域技术人员亟需研究的课题。
发明内容
本发明的目的是提供一种适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质，用以解决现有静态适配展示技术在应用于双屏幕展示方案时所存在会导致表单页面与左/右侧屏幕出现失配情况，进而影响表单页面适配展示效果以及用户对表单数据的感知体验的问题。
为了实现上述目的，本发明采用以下技术方案：
第一方面，提供了一种适用于左右双屏的表单页面自适配展示方法，包括：
实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕；
若触发，则获取所述表单展示屏的当前屏幕宽度；
根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度；
根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度；
根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示；
若需要，则根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。
基于上述发明内容，提供了一种使表单页面在尺寸可变化屏幕上能够动态适配展示的新方案，即先实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，若触发，则依次获取表单展示屏的当前屏幕宽度、表单页面的内容区域宽度、单行表单元素可展示数目以及单个表单元素可展示宽度，然后根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示，最后在需要时根据单个表单元素可展示宽度，使用弹性盒子在所述表单展示屏中换行展示所有表单元素，如此可使表单页面能够随着在左右双屏中的表单展示屏的尺寸大小变化情况而进行自动适配展示，保障用户对表单数据的感知体验，便于实际应用和推广。
在一个可能的设计中，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，包括：
基于window.matchMedia()函数，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕。
在一个可能的设计中，获取所述表单展示屏的当前屏幕宽度，包括：
基于document.body.clientWidth命令检测得到所述表单展示屏的当前屏幕宽度。
在一个可能的设计中，根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度，包括：
判断所述表单页面是否具有左侧边栏；
若是，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度减去所述左侧边栏的固定宽度；
若否，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度。
在一个可能的设计中，根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度，包括：
当所述内容区域宽度处于预设宽度区间内时，确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于与所述预设宽度区间对应的预设数目，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以该预设数目，其中，所述预设宽度区间包括第一宽度区间、第二宽度区间或第三宽度区间，所述第一宽度区间基于第一屏幕类型确定，所述第二宽度区间基于第二屏幕类型确定，所述第三宽度区间基于第三屏幕类型确定，所述第一屏幕类型的尺寸小于所述第二屏幕类型的尺寸，所述第二屏幕类型的尺寸小于所述第三屏幕类型的尺寸。
在一个可能的设计中，根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度，包括：
获取用户自定义的单行表单元素可展示数目Nuer；
根据所述内容区域宽度，按照如下公式计算得到单行表单元素最多可展示数目Nmax：
式中，CW表示所述内容区域宽度，cwmin表示单个表单元素的最窄可展示宽度，floor()表示向下取整函数；
判断所述单行表单元素最多可展示数目Nmax是否大于等于Nuer；
若是，则确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于Nuer，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以Nuer。
在一个可能的设计中，在根据所述表单页面的表单元素总数和所述单行可展示表单元素数目，判断所述表单页面的所有表单元素是否需要换行展示之后，所述方法还包括：
若不需要，则根据所述单个表单元素可展示宽度，使用ElementUI的row组件和col组件在所述表单展示屏中展示所述所有表单元素。
第二方面，提供了一种适用于左右双屏的表单页面自适配展示装置，包括有依次通信连接的变化事件监听模块、屏幕宽度获取模块、区域宽度确定模块、元素数目确定模块、换行展示判断模块和换行展示执行模块；
所述变化事件监听模块用于实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕；
所述屏幕宽度获取模块用于在所述表单展示屏触发有屏幕尺寸变化事件时，获取所述表单展示屏的当前屏幕宽度；
所述区域宽度确定模块用于根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度；
所述元素数目确定模块用于根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度；
所述换行展示判断模块用于根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示；
所述换行展示执行模块用于在所述所有表单元素需要换行展示时，根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。
在一个可能的设计中，所述表单页面自适配展示装置还包括有通信连接所述换行展示判断模块的非换行展示执行模块；
所述非换行展示执行模块用于在所述所有表单元素不需要换行展示时，根据所述单个表单元素可展示宽度，使用ElementUI的row组件和col组件在所述表单展示屏中展示所述所有表单元素。
第三方面，本发明提供了一种计算机设备，包括有依次通信连接的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如第一方面或第一方面中任意可能设计所述的表单页面自适配展示方法。
第四方面，本发明提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面或第一方面中任意可能设计所述的表单页面自适配展示方法。
第五方面，本发明提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如第一方面或第一方面中任意可能设计所述的表单页面自适配展示方法。
上述方案的有益效果：
(1)本发明创造性提供了一种使表单页面在尺寸可变化屏幕上能够动态适配展示的新方案，即先实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，若触发，则依次获取表单展示屏的当前屏幕宽度、表单页面的内容区域宽度、单行表单元素可展示数目以及单个表单元素可展示宽度，然后根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示，最后在需要时根据单个表单元素可展示宽度，使用弹性盒子在所述表单展示屏中换行展示所有表单元素，如此可使表单页面能够随着在左右双屏中的表单展示屏的尺寸大小变化情况而进行自动适配展示，保障用户对表单数据的感知体验，便于实际应用和推广。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的适用于左右双屏的表单页面自适配展示方法的流程示意图。
图2为本申请实施例提供的适用于左右双屏的表单页面自适配展示装置的结构示意图。
图3为本申请实施例提供的计算机设备的结构示意图。
具体实施方式
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将结合附图和实施例或现有技术的描述对本发明作简单地介绍，显而易见地，下面关于附图结构的描述仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在此需要说明的是，对于这些实施例方式的说明用于帮助理解本发明，但并不构成对本发明的限定。
应当理解，尽管本文可能使用术语第一和第二等等来描述各种对象，但是这些对象不应当受到这些术语的限制。这些术语仅用于区分一个对象和另一个对象。例如可以将第一对象称作第二对象,并且类似地可以将第二对象称作第一对象，同时不脱离本发明的示例实施例的范围。
应当理解，对于本文中可能出现的术语“和/或”，其仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A、单独存在B或者同时存在A和B等三种情况；又例如，A、B和/或C，可以表示存在A、B和C中的任意一种或他们的任意组合；对于本文中可能出现的术语“/和”，其是描述另一种关联对象关系，表示可以存在两种关系，例如，A/和B，可以表示：单独存在A或者同时存在A和B等两种情况；另外，对于本文中可能出现的字符“/”，一般表示前后关联对象是一种“或”关系。
实施例：
如图1所示，本实施例第一方面提供的且适用于左右双屏的表单页面自适配展示方法，可以但不限于由具有一定计算资源的用户终端执行，例如由个人计算机(PersonalComputer，PC，指一种大小、价格和性能适用于个人使用的多用途计算机；台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机)、智能手机、个人数字助理(Personal Digital Assistant，PDA)或可穿戴设备等电子设备执行。如图1所示，所述表单页面自适配展示方法，可以但不限于包括有如下步骤S1～S7。
S1.实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕。
在所述步骤S1中，所述左右双屏是指在本地的所述用户终端上进行左右分屏展示的双屏幕，即包括有左侧屏幕和右侧屏幕；它们可以分别独立地对不同表单数据进行基于UI页面形式的输出展示，也可以同步地对同一表单数据进行基于UI页面形式的输出展示，使得所述表单展示屏可以是所述左侧屏幕，也可以是所述右侧屏幕。由于所述左侧屏幕和所述右侧屏幕的尺寸大小可以但不限于通过拖动中间分界线左移或右移的方式进行动态调整(例如，当拖动所述中间分界线左移时，所述左侧屏幕变窄，所述右侧屏幕变宽；而当拖动所述中间分界线右移时，所述左侧屏幕变宽，所述右侧屏幕变窄)，因此需要实时监听所述表单展示屏是否触发屏幕尺寸变化事件，以便后续使表单页面与所述表单展示屏(即左/右侧屏幕)能够自动适配。
在所述步骤S1中，具体的，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，包括但不限于有：基于vue架构中的window.matchMedia()函数，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕。所述vue架构是一种基于JavaScript(即一种运行在浏览器端的脚本语言)的且用于构建用户界面的现有渐进式框架，所述window.matchMedia()函数为所述vue架构中的现有函数，基本语法是：var mediaQueryList＝window.matchMedia(mediaQueryString)，其中，mediaQueryString具体为一个字符串，表示要检查的媒体查询条件，因此可以通过在所述window.matchMedia()函数中设置合适的媒体查询条件来实时监听所述表单展示屏是否触发屏幕尺寸变化事件。此外，所述表单页面与所述表单展示屏的初始相适配方案可采用现有的静态适配展示方案来实现。
S2.在确定在左右双屏中的表单展示屏触发屏幕尺寸变化事件时，获取所述表单展示屏的当前屏幕宽度。
在所述步骤S2中，若所述表单展示屏触发有屏幕尺寸变化事件，则表明所述表单展示屏的尺寸大小发生了变化，需要具体得到最新的屏幕宽度。具体的，获取所述表单展示屏的当前屏幕宽度，包括但不限于有：基于vue架构中的document.body.clientWidth命令检测得到所述表单展示屏的当前屏幕宽度。所述document.body.clientWidth命令为用于在页面初始化mounted时获取浏览器的宽度的现有命令(如果要获取到浏览器的高度，还可以基于所述vue架构中的document.body.clientHeight命令来实现)，因此可以实现本步骤目的。
S3.根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度。
在所述步骤S3中，具体包括但不限于有：先判断所述表单页面是否具有左侧边栏；若是，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度减去所述左侧边栏的固定宽度；若否，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度。所述左侧边栏用于面向用户提供一些可选菜单，其有无除了取决于配置外，还可以按照如下方式进行隐藏或展示：当所述表单展示屏变窄至原始宽度的30％及以下时，隐藏所述左侧边栏，而当所述表单展示屏恢复变宽至原始宽度的30％以上时，又展示所述左侧边栏，因此具体判断方式可以基于所述左侧边栏的配置结果/和所述表单展示屏的所述当前屏幕宽度来具体确定。
S4.根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度。
在所述步骤S4中，上述的表单元素是所述表单页面的组成单元，例如表单数据中的字段。具体确定方式可以按照***提供的默认方式进行确认，也可以基于用户自定义结果进行确认，即可以具体包括但不限于有如下两种方式(A)和(B)：
(A)按照***提供的默认方式进行确认：当所述内容区域宽度处于预设宽度区间内时，确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于与所述预设宽度区间对应的预设数目，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以该预设数目，其中，所述预设宽度区间包括第一宽度区间、第二宽度区间或第三宽度区间，所述第一宽度区间基于第一屏幕类型确定，所述第二宽度区间基于第二屏幕类型确定，所述第三宽度区间基于第三屏幕类型确定，所述第一屏幕类型的尺寸小于所述第二屏幕类型的尺寸，所述第二屏幕类型的尺寸小于所述第三屏幕类型的尺寸。在一示例中，所述第一屏幕类型是小屏幕类型，所述第二屏幕类型是中屏幕类型，所述第三屏幕类型是大屏幕类型，所述第一宽度区间是基于小屏幕类型确定的宽度区间，所述第二宽度区间是基于中屏幕类型确定的宽度区间，所述第三宽度区间是基于大屏幕类型确定的宽度区间。举例的，针对小屏幕类型，可以预设对应的宽度区间为[768，1280)，并设置对应的预设数目为2；针对中屏幕类型，可以预设对应的宽度区间为[1280，1600)，并设置对应的预设数目为3；针对大屏幕类型，可以预设对应的宽度区间为[1600，+∞)，并设置对应的预设数目为4。
(B)基于用户自定义结果进行确认：先获取用户自定义的单行表单元素可展示数目Nuer，同时根据所述内容区域宽度，按照如下公式计算得到单行表单元素最多可展示数目Nmax：
式中，CW表示所述内容区域宽度，cwmin表示单个表单元素的最窄可展示宽度，floor()表示向下取整函数；然后判断所述单行表单元素最多可展示数目Nmax是否大于等于Nuer；若是，则确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于Nuer，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以Nuer。前述用户自定义的单行表单元素可展示数目Nuer可由用户输入得到，所述单个表单元素的最窄可展示宽度cwmin为已知数据，因此可以判断用户自定义数目是否适用，并仅在适用时才会予以确认，而若不适用，将输出展示“超出最大值”来进行提醒，以便用户重新自定义合适数目。
在所述步骤S4中，上述方式(A)或(B)中的具体计算过程可基于vue架构中的计算属性computed来实现。
S5.根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示。
在所述步骤S5中，具体的，可在所述表单元素总数小于等于所述单行可展示表单元素数目时，判定不需要换行展示，而在所述表单元素总数大于所述单行可展示表单元素数目时，判定需要换行展示。
S6.若需要，则根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。
在所述步骤S6中，所述弹性盒display:flex布局模式是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，它包括有如下六个属性：伸缩流方向flex-direction、伸缩换行flex-wrap、伸缩流方向与换行flex-flow、主轴对齐justify-content、侧轴对齐align-items和堆栈伸缩行align-content，因此可以使用所述伸缩换行flex-wrap属性(基本语法是：box{flex-wrap:nowrap|wrap|wrap-reverse},其中，nowrap[默认]：不换行；wrap：换行，第一行在上方；wrap-reverse：换行，第一行在下方)来在所述表单展示屏中换行展示所述所有表单元素，以便保证表单元素在屏幕实时变化的过程中可在不破坏元素布局的情况下，自动换行/回到上一行，进而可以使所述表单页面与所述表单展示屏能够自动适配，保障用户对表单数据的感知体验。
S7.若不需要，则根据所述单个表单元素可展示宽度，使用ElementUI的row组件和col组件在所述表单展示屏中展示所述所有表单元素。
在所述步骤S7中，ElementUI是一套为用户(例如开发者、设计师和产品经理等)准备的基于Vue 2.0的桌面端组件库，所述row组件和所述col组件是库中的常备组件，用于保证无论屏幕怎么变化，所有元素始终保持在一行，不会被挤下来被迫换行，进而也可以使所述表单页面与所述表单展示屏能够自动适配，保障用户对表单数据的感知体验。
由此基于前述步骤S1～S7所描述的且适用于左右双屏的表单页面自适配展示方法，提供了一种使表单页面在尺寸可变化屏幕上能够动态适配展示的新方案，即先实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，若触发，则依次获取表单展示屏的当前屏幕宽度、表单页面的内容区域宽度、单行表单元素可展示数目以及单个表单元素可展示宽度，然后根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示，最后在需要时根据单个表单元素可展示宽度，使用弹性盒子在所述表单展示屏中换行展示所有表单元素，如此可使表单页面能够随着在左右双屏中的表单展示屏的尺寸大小变化情况而进行自动适配展示，保障用户对表单数据的感知体验，便于实际应用和推广。
如图2所示，本实施例第二方面提供了一种实现第一方面所述的表单页面自适配展示方法的虚拟装置，即，一种适用于左右双屏的表单页面自适配展示装置，包括有依次通信连接的变化事件监听模块、屏幕宽度获取模块、区域宽度确定模块、元素数目确定模块、换行展示判断模块和换行展示执行模块。
所述变化事件监听模块用于实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕。
所述屏幕宽度获取模块用于在确定在左右双屏中的表单展示屏触发屏幕尺寸变化事件时，获取所述表单展示屏的当前屏幕宽度。
所述区域宽度确定模块用于根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度。
所述元素数目确定模块用于根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度。
所述换行展示判断模块用于根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示。
所述换行展示执行模块用于在所述所有表单元素需要换行展示时，根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。
在一个可能的设计中，所述表单页面自适配展示装置还包括有通信连接所述换行展示判断模块的非换行展示执行模块。
所述非换行展示执行模块用于在所述所有表单元素不需要换行展示时，根据所述单个表单元素可展示宽度，使用ElementUI的row组件和col组件在所述表单展示屏中展示所述所有表单元素。
本实施例第二方面提供的前述装置的工作过程、工作细节和技术效果，可以参见第一方面所述的表单页面自适配展示方法，于此不再赘述。
如图3所示，本实施例第三方面提供了一种执行如第一方面所述的表单页面自适配展示方法的计算机设备，包括有依次通信连接的存储器、处理器和收发器。所述存储器用于存储计算机程序。所述收发器用于收发消息。所述处理器用于读取所述计算机程序，执行如第一方面所述的表单页面自适配展示方法。具体举例的，所述存储器可以但不限于包括随机存取存储器(Random-Access Memory，RAM)、只读存储器(Read-Only Memory，ROM)、闪存(Flash Memory)、先进先出存储器(First Input First Output，FIFO)和/或先进后出存储器(First Input Last Output，FILO)等等；所述处理器可以但不限于采用型号为STM32F105系列的微处理器。此外，所述计算机设备还可以但不限于包括有电源模块、显示屏和其它必要的部件。
本实施例第三方面提供的前述计算机设备的工作过程、工作细节和技术效果，可以参见第一方面所述的表单页面自适配展示方法，于此不再赘述。
本实施例第四方面提供了一种存储包含如第一方面所述的表单页面自适配展示方法的指令的计算机可读存储介质，即所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面所述的表单页面自适配展示方法。所述计算机可读存储介质是指存储数据的载体，可以但不限于包括软盘、光盘、硬盘、闪存、优盘和/或记忆棒(Memory Stick)等计算机可读存储介质，所述计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程装置。
本实施例第四方面提供的前述计算机可读存储介质的工作过程、工作细节和技术效果，可以参见如第一方面所述的表单页面自适配展示方法，于此不再赘述。
本实施例第五方面提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如第一方面所述的表单页面自适配展示方法。所述计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程装置。
最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种适用于左右双屏的表单页面自适配展示方法，其特征在于，包括：
实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕；
在确定在左右双屏中的表单展示屏触发屏幕尺寸变化事件时，获取所述表单展示屏的当前屏幕宽度；
根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度；
根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度；
根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示；
若需要，则根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。
2.根据权利要求1所述的表单页面自适配展示方法，其特征在于，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，包括：
基于window.matchMedia()函数，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕。
3.根据权利要求1所述的表单页面自适配展示方法，其特征在于，获取所述表单展示屏的当前屏幕宽度，包括：
基于document.body.clientWidth命令检测得到所述表单展示屏的当前屏幕宽度。
4.根据权利要求1所述的表单页面自适配展示方法，其特征在于，根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度，包括：
判断所述表单页面是否具有左侧边栏；
若是，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度减去所述左侧边栏的固定宽度；
若否，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度。
5.根据权利要求1所述的表单页面自适配展示方法，其特征在于，根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度，包括：
当所述内容区域宽度处于预设宽度区间内时，确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于与所述预设宽度区间对应的预设数目，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以该预设数目，其中，所述预设宽度区间包括第一宽度区间、第二宽度区间或第三宽度区间，所述第一宽度区间基于第一屏幕类型确定，所述第二宽度区间基于第二屏幕类型确定，所述第三宽度区间基于第三屏幕类型确定，所述第一屏幕类型的尺寸小于所述第二屏幕类型的尺寸，所述第二屏幕类型的尺寸小于所述第三屏幕类型的尺寸。
6.根据权利要求1所述的表单页面自适配展示方法，其特征在于，根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度，包括：
获取用户自定义的单行表单元素可展示数目Nuer；
根据所述内容区域宽度，按照如下公式计算得到单行表单元素最多可展示数目Nmax：
式中，CW表示所述内容区域宽度，cwmin表示单个表单元素的最窄可展示宽度，floor()表示向下取整函数；
判断所述单行表单元素最多可展示数目Nmax是否大于等于Nuer；
若是，则确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于Nuer，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以Nuer。
7.根据权利要求1～6中任意一项所述的表单页面自适配展示方法，其特征在于，在根据所述表单页面的表单元素总数和所述单行可展示表单元素数目，判断所述表单页面的所有表单元素是否需要换行展示之后，所述方法还包括：
若不需要，则根据所述单个表单元素可展示宽度，使用ElementUI的row组件和col组件在所述表单展示屏中展示所述所有表单元素。
8.一种适用于左右双屏的表单页面自适配展示装置，其特征在于，包括有依次通信连接的变化事件监听模块、屏幕宽度获取模块、区域宽度确定模块、元素数目确定模块、换行展示判断模块和换行展示执行模块；
所述变化事件监听模块用于实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕；
所述屏幕宽度获取模块用于在确定在左右双屏中的表单展示屏触发屏幕尺寸变化事件时，获取所述表单展示屏的当前屏幕宽度；
所述区域宽度确定模块用于根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度；
所述元素数目确定模块用于根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度；
所述换行展示判断模块用于根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示；
所述换行展示执行模块用于在所述所有表单元素需要换行展示时，根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。
9.一种计算机设备，其特征在于，包括有依次通信连接的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如权利要求1～7中任意一项所述的表单页面自适配展示方法。
10.一种计算机可读存储介质，其特征在于,所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如权利要求1～7中任意一项所述的表单页面自适配展示方法。
CN202310481320.2A 2023-04-28 2023-04-28 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质 Active CN116578219B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310481320.2A CN116578219B (zh) 2023-04-28 2023-04-28 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310481320.2A CN116578219B (zh) 2023-04-28 2023-04-28 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN116578219A true CN116578219A (zh) 2023-08-11
CN116578219B CN116578219B (zh) 2024-06-14

Family

ID=87533282

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310481320.2A Active CN116578219B (zh) 2023-04-28 2023-04-28 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN116578219B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117196537A (zh) * 2023-09-28 2023-12-08 四川赛闯检测股份有限公司 基于可视化技术的检验检测任务管理看板

Citations (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1845054A (zh) * 2005-04-08 2006-10-11 皮克塞(研究)有限公司 用于动态缩放和重新排列显示项的***和方法
US20070157081A1 (en) * 2004-07-06 2007-07-05 Fujitsu Limited Browser with screen-reading function and browsing processing method
CN101606124A (zh) * 2007-01-25 2009-12-16 夏普株式会社 多窗口管理装置及程序、存储介质及信息处理装置
CN102073650A (zh) * 2009-11-25 2011-05-25 阿里巴巴集团控股有限公司 一种网页自适应调节的方法和设备
CN102129345A (zh) * 2010-01-19 2011-07-20 Lg电子株式会社 移动终端及其控制方法
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
US20140013216A1 (en) * 2011-11-24 2014-01-09 Sharp Kabushiki Kaisha Display control device, display method, control program, and recording medium
CN106371810A (zh) * 2015-07-20 2017-02-01 腾讯科技（深圳）有限公司 浏览器窗口内分块拉伸方法及装置
CN111259640A (zh) * 2018-11-15 2020-06-09 零氪科技（北京）有限公司 一种基于文本内容的动态列表布局方法
CN111857332A (zh) * 2015-02-12 2020-10-30 北京三星通信技术研究有限公司 获取笔记信息的方法和装置
CN111984351A (zh) * 2020-08-07 2020-11-24 中移（杭州）信息技术有限公司 页面适配方法、电子设备、计算机可读存储介质
US20210034816A1 (en) * 2019-08-02 2021-02-04 Spectacles LLC Definition retrieval and display
WO2021068331A1 (zh) * 2019-10-11 2021-04-15 平安科技（深圳）有限公司 一种网页自适应布局方法、服务器及计算机可读存储介质
CN113536179A (zh) * 2021-06-21 2021-10-22 北京达佳互联信息技术有限公司 页面的生成方法、装置、电子设备和存储介质
CN113821129A (zh) * 2020-06-19 2021-12-21 华为技术有限公司 一种显示窗口控制方法及电子设备
CN113836470A (zh) * 2021-09-29 2021-12-24 浪潮卓数大数据产业发展有限公司 一种构建响应式数据展示页面的方法及设备、介质
CN114077429A (zh) * 2020-08-18 2022-02-22 华为技术有限公司 一种显示界面的布局方法及电子设备
WO2022193616A1 (zh) * 2021-03-19 2022-09-22 掌阅科技股份有限公司 应用页面的展示方法、电子设备及存储介质
CN115935925A (zh) * 2022-10-28 2023-04-07 上海乾臻信息科技有限公司 表格适配方法、电子设备及计算机可读存储介质

Patent Citations (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070157081A1 (en) * 2004-07-06 2007-07-05 Fujitsu Limited Browser with screen-reading function and browsing processing method
CN1845054A (zh) * 2005-04-08 2006-10-11 皮克塞(研究)有限公司 用于动态缩放和重新排列显示项的***和方法
CN101606124A (zh) * 2007-01-25 2009-12-16 夏普株式会社 多窗口管理装置及程序、存储介质及信息处理装置
CN102073650A (zh) * 2009-11-25 2011-05-25 阿里巴巴集团控股有限公司 一种网页自适应调节的方法和设备
CN102129345A (zh) * 2010-01-19 2011-07-20 Lg电子株式会社 移动终端及其控制方法
US20140013216A1 (en) * 2011-11-24 2014-01-09 Sharp Kabushiki Kaisha Display control device, display method, control program, and recording medium
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN111857332A (zh) * 2015-02-12 2020-10-30 北京三星通信技术研究有限公司 获取笔记信息的方法和装置
CN106371810A (zh) * 2015-07-20 2017-02-01 腾讯科技（深圳）有限公司 浏览器窗口内分块拉伸方法及装置
CN111259640A (zh) * 2018-11-15 2020-06-09 零氪科技（北京）有限公司 一种基于文本内容的动态列表布局方法
US20210034816A1 (en) * 2019-08-02 2021-02-04 Spectacles LLC Definition retrieval and display
WO2021068331A1 (zh) * 2019-10-11 2021-04-15 平安科技（深圳）有限公司 一种网页自适应布局方法、服务器及计算机可读存储介质
CN113821129A (zh) * 2020-06-19 2021-12-21 华为技术有限公司 一种显示窗口控制方法及电子设备
CN111984351A (zh) * 2020-08-07 2020-11-24 中移（杭州）信息技术有限公司 页面适配方法、电子设备、计算机可读存储介质
CN114077429A (zh) * 2020-08-18 2022-02-22 华为技术有限公司 一种显示界面的布局方法及电子设备
WO2022193616A1 (zh) * 2021-03-19 2022-09-22 掌阅科技股份有限公司 应用页面的展示方法、电子设备及存储介质
CN113536179A (zh) * 2021-06-21 2021-10-22 北京达佳互联信息技术有限公司 页面的生成方法、装置、电子设备和存储介质
CN113836470A (zh) * 2021-09-29 2021-12-24 浪潮卓数大数据产业发展有限公司 一种构建响应式数据展示页面的方法及设备、介质
CN115935925A (zh) * 2022-10-28 2023-04-07 上海乾臻信息科技有限公司 表格适配方法、电子设备及计算机可读存储介质

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
DIGGER_419: "使用flex-wrap实现弹性盒自动换行_html弹性盒子怎么五个过后自动换行", pages 1, Retrieved from the Internet <URL:https://blog.csdn.net/digger_419/article/details/102897796> *
大老毕: "vue监听屏幕尺寸变化，window.onresize很简单_监听屏幕大小变化", pages 1, Retrieved from the Internet <URL:https://blog.csdn.net/nilmao/article/details/123974639> *
小刺猬_0421: "超详细！弹性盒子(display:flex)", pages 1 - 38, Retrieved from the Internet <URL:https://www.jianshu.com/p/58fbd212fbc1> *
薇薇: "vue项目拖动实现修改左右宽度", pages 1 - 3, Retrieved from the Internet <URL:https://segmentfault.com/a/1190000023324536> *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117196537A (zh) * 2023-09-28 2023-12-08 四川赛闯检测股份有限公司 基于可视化技术的检验检测任务管理看板

Also Published As

Publication number Publication date
CN116578219B (zh) 2024-06-14

Similar Documents

Publication Publication Date Title
US10831703B2 (en) Displaying changes to versioned files
US9547525B1 (en) Drag toolbar to enter tab switching interface
CA2880500C (en) Transferring a state of an application from a first computing device to a second computing device
US9311426B2 (en) Orientation-dependent processing of input files by an electronic device
US9824137B2 (en) Block zoom on a mobile electronic device
JP2012525652A (ja) グラフィカルユーザインタフェース内でスクレープされたウェブページを提供するための方法および装置
WO2005050393A2 (en) User interface for displaying multiple applications
US20130073945A1 (en) Dynamic reorganization of page elements of a web application
CN116578219B (zh) 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质
WO2015094824A1 (en) Invocation control over keyboard user interface
EP2616917A1 (en) Branded browser frame
CN112114928B (zh) 显示页面的处理方法和装置
US20130275878A1 (en) Method, device, server, and mobile terminal for browsing web pages
WO2013085592A1 (en) Multiple tab stack user interface
WO2014067442A1 (en) Page browsing method and browser
CN104572822A (zh) 文本展现方法及装置
CN111651700B (zh) 消息展示方法、装置、电子设备及存储介质
CN108924030A (zh) 电子装置、动态配置消息展示方式的方法及存储介质
US8860735B2 (en) Aligning script animations with display refresh
CN108369538A (zh) 下载视觉资产
US20130067320A1 (en) Batch Document Formatting and Layout on Display Refresh
US20140129927A1 (en) Page browsing method and browser
CN113127780A (zh) 页面加载方法、装置和电子设备
US20120105455A1 (en) Utilizing document structure for animated pagination
CN106775835A (zh) 获取升级文件的方法、服务器及终端

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant