CN116578219A - Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium - Google Patents
Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium Download PDFInfo
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 41
- 230000008859 change Effects 0.000 claims abstract description 33
- 238000012544 monitoring process Methods 0.000 claims description 17
- 230000006870 function Effects 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 8
- 230000009977 dual effect Effects 0.000 claims description 7
- 238000004891 communication Methods 0.000 claims description 5
- 230000008447 perception Effects 0.000 abstract description 7
- 238000013461 design Methods 0.000 description 11
- 230000006978 adaptation Effects 0.000 description 6
- 230000008569 process Effects 0.000 description 6
- 230000000694 effects Effects 0.000 description 4
- 230000003068 static effect Effects 0.000 description 3
- 230000003044 adaptive effect Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 239000000470 constituent Substances 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000001125 extrusion Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000010200 validation analysis Methods 0.000 description 1
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
The application discloses a form page self-adapting display method and device suitable for left and right double screens, computer equipment and a computer readable storage medium, and relates to the technical field of form page display. According to the method, whether the form display screens in the left screen and the right screen trigger a screen size change event or not is monitored in real time, if yes, the current screen width of the form display screens, the content area width of the form pages, the displayable number of single form elements and the displayable width of the single form elements are sequentially obtained, whether line feed display is needed for all the form elements of the form pages or not is judged according to the comparison result of the total number of the form elements of the form pages and the prime number of the single displayable form elements, and when the line feed display is needed, all the form elements are displayed in the form display screens in a line feed mode by using an elastic box, so that the form pages can be automatically adaptively displayed along with the size change condition of the form display screens, and the perception experience of the form data of users is ensured.
Description
Technical Field
The application belongs to the technical field of form page display, and particularly relates to a form page self-adaptive display method and device suitable for left and right double screens, computer equipment and a computer readable storage medium.
Background
The business system refers to business links required by the enterprise to achieve positioning, roles played by each partner, and manners and contents of stakeholders to cooperate and trade. In the process that a User initiates a service request to a background server of a service system through a User terminal, the User terminal is often required to perform output display on a feedback form data based on a User Interface (UI) page form. In order to ensure a user's perceived experience of the form data, it is a very important technical key point how to adapt the form page (i.e. the UI page for presenting the form data) to the presentation screen.
The current business system project on the market mainly provides a static adaptation display scheme for adapting a form page to a single screen, namely, the form page adaptation display strategy is not required to be adjusted after preliminary adaptation because the size of the single screen is fixed. However, with further development of screen display technology, a dual-screen display scheme for realizing left and right split-screen display on the same device is presented. In the double-screen display scheme, the left screen and the right screen can respectively and independently display the same or different form pages, and the sizes of the left screen and the right screen can be dynamically adjusted by dragging a middle dividing line to move left or right, so that if the existing static adaptive display scheme is still adopted, the situation that the form pages are mismatched with the left/right screen can be caused, and further the form page adaptive display effect and the perception experience of a user on form data are affected. Therefore, how to provide a form page self-adaptive display scheme suitable for the left and right dual screens so that the form page and the left/right screen can be automatically adapted, and ensuring the perception experience of the user on the form data is a subject of urgent study for those skilled in the art.
Disclosure of Invention
The application aims to provide a form page self-adaptive display method, a form page self-adaptive display device, a form page self-adaptive display computer device and a form page self-adaptive display computer device, and a form page self-adaptive display computer device.
In order to achieve the above purpose, the present application adopts the following technical scheme:
in a first aspect, a form page self-adaptive display method applicable to left and right dual screens is provided, including:
monitoring whether a form display screen in a left screen and a right screen triggers a screen size change event in real time, wherein the form display screen is a screen for displaying form pages;
if yes, acquiring the current screen width of the form display screen;
determining the width of the content area of the current form page according to the current screen width;
determining the number of single-row form elements which can be displayed and the width of single form elements which can be displayed currently and in the form display screen according to the width of the content area;
judging whether all the table elements of the form page need to be displayed in a line according to the comparison result of the total number of the table elements of the form page and the number of the single-line displayable table elements;
if so, displaying the width according to the single form element, and displaying all the form elements in a line-feeding manner in the form display screen by using a flexible line-feeding flex-wrap attribute of an elastic box display: flex layout mode.
Based on the above summary of the application, a new scheme is provided for enabling a form page to be dynamically adapted to display on a screen with a changeable size, that is, whether the form display screen in a left screen and a right screen triggers a screen size change event is monitored in real time, if so, the current screen width of the form display screen, the content area width of the form page, the displayable number of single form elements and the displayable width of single form elements are sequentially obtained, then, according to the comparison result of the total number of the form elements of the form page and the number of the single displayable form elements, whether all the form elements of the form page need to be subjected to line feed display is judged, and finally, according to the displayable width of the single form element, an elastic box is used for line feed display of all the form elements in the form display screen when needed, so that the form page can be automatically adapted to display along with the size change condition of the form display screen in the left screen and the right screen, the perception experience of the form data is ensured, and practical application and popularization are facilitated for users.
In one possible design, monitoring in real time whether a form presentation screen in the left and right dual screens triggers a screen size change event includes:
based on a window.matchmedia () function, monitoring whether a form display screen in a left screen and a right screen triggers a screen size change event in real time, wherein the form display screen refers to a screen for displaying a form page.
In one possible design, obtaining the current screen width of the form presentation screen includes:
and detecting the current screen width of the form display screen based on the document.
In one possible design, determining the current and content area width of the form page according to the current screen width includes:
judging whether the form page has a left side column or not;
if yes, determining that the width of the content area of the current form page is equal to the width of the current screen minus the fixed width of the left side column;
if not, determining that the width of the content area of the current form page is equal to the width of the current screen.
In one possible design, determining a current and single form element presentable number and a single form element presentable width in the form presentation screen based on the content area width includes:
when the width of the content area is within a preset width interval, determining that the number of single-row form elements which are current and in the form display screen can be displayed is equal to the preset number corresponding to the preset width interval, and determining that the width of single-row form elements which are current and in the form display screen can be displayed is equal to the width of the content area divided by the preset number, wherein the preset width interval comprises a first width interval, a second width interval or a third width interval, the first width interval is determined based on a first screen type, the second width interval is determined based on a second screen type, the third width interval is determined based on a third screen type, the size of the first screen type is smaller than the size of the second screen type, and the size of the second screen type is smaller than the size of the third screen type.
In one possible design, determining a current and single form element presentable number and a single form element presentable width in the form presentation screen based on the content area width includes:
acquiring a user-defined single-line form element exposable number N uer ；
According to the width of the content area, the maximum displayable number N of single row list unit elements is calculated according to the following formula max ：
Wherein CW represents the width of the content area, CW min Represents the narrowest exposable width of a single form element, floor () represents a rounding down function;
judging the maximum displayable number N of the single row list element max Whether or not to be greater than or equal to N uer ；
If yes, determining that the number of single-row form elements which are current and in the form display screen can be displayed is equal to N uer And determining that a single form element that is current and in the form presentation screen may present a width equal to the content area width divided by N uer 。
In one possible design, after determining whether all the form elements of the form page need to be line-feed for presentation based on the total number of form elements of the form page and the number of single line presentable form elements, the method further comprises:
if not, the width can be presented according to the single form element, and all form elements are presented in the form presentation screen by using the row component and the col component of the ElementUI.
The second aspect provides a form page self-adapting display device suitable for left and right double screens, which comprises a change event monitoring module, a screen width acquisition module, a region width determination module, an element number determination module, a line feed display judging module and a line feed display executing module which are connected in sequence in a communication manner;
the change event monitoring module is used for monitoring whether a form display screen in the left screen and the right screen triggers a screen size change event in real time, wherein the form display screen is a screen for displaying a form page;
the screen width acquisition module is used for acquiring the current screen width of the form display screen when the form display screen triggers a screen size change event;
the area width determining module is used for determining the current content area width of the form page according to the current screen width;
the element number determining module is used for determining the current single-row form element presentable number and single form element presentable width in the form display screen according to the content area width;
the line feed display judging module is used for judging whether all the table unit elements of the form page need line feed display or not according to the comparison result of the total number of the table unit elements of the form page and the number of the single-row displayable table units;
and the line feed display execution module is used for displaying all the form elements in a line feed manner in the form display screen by using the flexible line feed flex-wrap attribute of an elastic box display: flex layout mode according to the displayable width of the single form element when the line feed display is required for displaying all the form elements.
In one possible design, the form page self-adaptive display device further includes a non-line feed display execution module communicatively connected to the line feed display judgment module;
the non-line feed display execution module is used for displaying all the form elements in the form display screen by using a row component and a col component of the ElementUI according to the single form element display width when the line feed display is not needed for all the form elements.
In a third aspect, the present application provides a computer device, comprising a memory, a processor and a transceiver, which are in communication connection in turn, wherein the memory is configured to store a computer program, the transceiver is configured to send and receive a message, and the processor is configured to read the computer program, and execute the form page self-adapting presentation method according to the first aspect or any of the possible designs of the first aspect.
In a fourth aspect, the present application provides a computer readable storage medium having instructions stored thereon which, when executed on a computer, perform a form page self-adapting presentation method as described in the first aspect or any of the possible designs of the first aspect.
In a fifth aspect, the present application provides a computer program product comprising instructions which, when run on a computer, cause the computer to perform the form page self-adapting presentation method as described in the first aspect or any of the possible designs of the first aspect.
The beneficial effect of above-mentioned scheme:
(1) The application creatively provides a new scheme for enabling a form page to be dynamically adapted and displayed on a size-variable screen, namely whether a form display screen in a left screen and a right screen triggers a screen size-variable event or not is monitored in real time, if so, the current screen width of the form display screen, the content area width of the form page, the displayable number of single form elements and the displayable width of single form elements are sequentially obtained, then whether all form elements of the form page need to be subjected to line-feed display is judged according to the comparison result of the total number of form elements of the form page and the prime number of the single-row displayable form elements, finally, according to the displayable width of the single form element, an elastic box is used for line-feed display of all form elements in the form display screen when needed, so that the form page can be subjected to automatic adaptation display along with the size-variable condition of the form display screen in the left screen and the right screen, the perception of the form data of a user is ensured, and practical application and popularization are facilitated.
Drawings
In order to more clearly illustrate the embodiments of the application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a schematic flow chart of a form page self-adaptive display method applicable to left and right dual screens according to an embodiment of the present application.
Fig. 2 is a schematic structural diagram of a form page self-adaptive display device applicable to left and right dual screens according to an embodiment of the present application.
Fig. 3 is a schematic structural diagram of a computer device according to an embodiment of the present application.
Detailed Description
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the present application will be briefly described below with reference to the accompanying drawings and the description of the embodiments or the prior art, and it is obvious that the following description of the structure of the drawings is only some embodiments of the present application, and other drawings can be obtained according to these drawings without inventive effort to a person skilled in the art. It should be noted that the description of these examples is for aiding in understanding the present application, but is not intended to limit the present application.
It should be understood that although the terms first and second, etc. may be used herein to describe various objects, these objects should not be limited by these terms. These terms are only used to distinguish one object from another. For example, a first object may be referred to as a second object, and similarly a second object may be referred to as a first object, without departing from the scope of example embodiments of the application.
It should be understood that for the term "and/or" that may appear herein, it is merely one association relationship that describes an associated object, meaning that there may be three relationships, e.g., a and/or B, may represent: three cases of A alone, B alone or both A and B exist; as another example, A, B and/or C, can represent the presence of any one of A, B and C or any combination thereof; for the term "/and" that may appear herein, which is descriptive of another associative object relationship, it means that there may be two relationships, e.g., a/and B, it may be expressed that: the two cases of A and B exist independently or simultaneously; in addition, for the character "/" that may appear herein, it is generally indicated that the context associated object is an "or" relationship.
Examples:
as shown in fig. 1, the form page self-adaptive display method provided in the first aspect of the present embodiment and applicable to both left and right screens may be performed by, but not limited to, a user terminal with a certain computing resource, for example, a personal computer (Personal Computer, PC, refer to a multipurpose computer with a size, price and performance suitable for personal use, and desktop, notebook, tablet, super-notebook, etc. belong to personal computers), a smart phone, a personal digital assistant (Personal Digital Assistant, PDA), or an electronic device such as a wearable device. As shown in FIG. 1, the form page self-adaptive display method may include, but is not limited to, the following steps S1 to S7.
S1, monitoring whether a form display screen in a left screen and a right screen triggers a screen size change event in real time, wherein the form display screen is a screen for displaying form pages.
In the step S1, the left and right dual-screen refers to a dual-screen for performing left and right split-screen display on the local user terminal, that is, includes a left screen and a right screen; the form display screen can independently display the output of different form data based on the UI page form, and can synchronously display the output of the same form data based on the UI page form, so that the form display screen can be the left screen or the right screen. Since the sizes of the left and right screens may be dynamically adjusted by, but not limited to, dragging the middle dividing line to move left or right (e.g., the left screen narrows and the right screen widens when the middle dividing line is dragged to move left, and the left screen widens and the right screen narrows when the middle dividing line is dragged to move right), it is necessary to monitor in real time whether the form presentation screen triggers a screen size change event so that the form page can be automatically adapted to the form presentation screen (i.e., left/right screen) later.
In the step S1, specifically, whether the form display screen in the left and right dual screens triggers a screen size change event is monitored in real time, including but not limited to: based on a window/matchmedia () function in a vue architecture, monitoring whether a form display screen in a left screen and a right screen triggers a screen size change event in real time, wherein the form display screen refers to a screen for displaying form pages. The vue architecture is a JavaScript-based (i.e. a scripting language running on the browser side) and is used to build the existing progressive framework of the user interface, the window/matchmedia () function is the existing function in the vue architecture, the basic syntax is: var mediaQueryList = window.matchmedia (mediaquery string), wherein the mediaquery string is specifically a string representing the media query conditions to be checked, so whether the form display screen triggers a screen size change event can be monitored in real time by setting appropriate media query conditions in the window.matchmedia () function. In addition, the initial adaptation scheme of the form page and the form display screen can be realized by adopting the existing static adaptation display scheme.
S2, when the event that the form display screen in the left screen and the right screen triggers the screen size change is determined, the current screen width of the form display screen is obtained.
In the step S2, if the form display screen triggers a screen size change event, it indicates that the size of the form display screen is changed, and the latest screen width needs to be obtained specifically. Specifically, the current screen width of the form display screen is obtained, including but not limited to: the current screen width of the form display screen is detected based on a document body width command in the vue architecture. The document body, client width command is an existing command for acquiring the width of the browser at the time of page initialization mount (if the height of the browser is to be acquired, it can be implemented based on the document body, client height command in the vue architecture), so the purpose of this step can be achieved.
S3, determining the width of the content area of the current form page according to the width of the current screen.
In the step S3, specific examples include, but are not limited to: firstly judging whether the form page has a left side column or not; if yes, determining that the width of the content area of the current form page is equal to the width of the current screen minus the fixed width of the left side column; if not, determining that the width of the content area of the current form page is equal to the width of the current screen. The left side bar is used for providing some selectable menus for users, and whether the selectable menus are hidden or displayed according to the following manner besides the configuration: when the form display screen is narrowed to 30% or less of the original width, the left side column is hidden, and when the form display screen is restored to be widened to 30% or more of the original width, the left side column is displayed, so that the specific judgment mode can be specifically determined based on the configuration result of the left side column and the current screen width of the form display screen.
S4, determining the number of single-row form elements which can be displayed currently and in the form display screen and the width of single form elements which can be displayed according to the width of the content area.
In the step S4, the form element is a constituent unit of the form page, for example, a field in form data. The specific determination mode can be confirmed according to a default mode provided by the system, and can also be confirmed based on a user-defined result, namely the following two modes (A) and (B) can be specifically included but not limited to:
(A) Validation is performed in a default manner provided by the system: when the width of the content area is within a preset width interval, determining that the number of single-row form elements which are current and in the form display screen can be displayed is equal to the preset number corresponding to the preset width interval, and determining that the width of single-row form elements which are current and in the form display screen can be displayed is equal to the width of the content area divided by the preset number, wherein the preset width interval comprises a first width interval, a second width interval or a third width interval, the first width interval is determined based on a first screen type, the second width interval is determined based on a second screen type, the third width interval is determined based on a third screen type, the size of the first screen type is smaller than the size of the second screen type, and the size of the second screen type is smaller than the size of the third screen type. In an example, the first screen type is a small screen type, the second screen type is a medium screen type, the third screen type is a large screen type, the first width interval is a width interval determined based on the small screen type, the second width interval is a width interval determined based on the medium screen type, and the third width interval is a width interval determined based on the large screen type. For example, for a small screen type, a corresponding width interval may be preset to be [768, 1280), and a corresponding preset number may be set to be 2; for the middle screen type, a corresponding width interval can be preset as [1280, 1600), and a corresponding preset number is set as 3; for the large screen type, the corresponding width interval can be preset to be [1600, + -infinity), and the corresponding preset number is set to be 4.
(B) Confirming based on the user-defined result: first, the number N of the single-line form elements which are user-defined and can be displayed is obtained uer At the same time according to the content area widthThe degree, the maximum displayable number N of single-row list element is calculated according to the following formula max ：
Wherein CW represents the width of the content area, CW min Represents the narrowest exposable width of a single form element, floor () represents a rounding down function; then judging the maximum displayable number N of the single-row list element max Whether or not to be greater than or equal to N uer The method comprises the steps of carrying out a first treatment on the surface of the If yes, determining that the number of single-row form elements which are current and in the form display screen can be displayed is equal to N uer And determining that a single form element that is current and in the form presentation screen may present a width equal to the content area width divided by N uer . The user-defined single-line form elements may exhibit a number N uer Can be input by a user, the narrowest displayable width cw of the single form element min It is known data, so it can determine if the user-defined number is applicable and confirm it only if applicable, and if not, output display "exceeds maximum value" to remind so that the user can re-define the appropriate number.
In the step S4, the specific calculation process in the above manner (a) or (B) may be implemented based on the calculated attribute in the vue architecture.
S5, judging whether all the table elements of the form page need to be displayed in a line-feed mode according to the comparison result of the total number of the table elements of the form page and the number of the single-line displayable table elements.
In the step S5, specifically, when the total number of the table unit elements is less than or equal to the number of the single-row displayable form elements, it may be determined that line feed display is not required, and when the total number of the table unit elements is greater than the number of the single-row displayable form elements, it may be determined that line feed display is required.
S6, if needed, displaying the width according to the single form element, and displaying all the form elements in a line-feeding manner in the form display screen by using a flexible line-feeding flex-wrap attribute of an elastic box display: flex layout mode.
In the step S6, the Flexible Box display: flex layout mode is an abbreviation of Flexible Box, meaning "Flexible layout", for providing maximum flexibility to the Box-like model, and includes the following six properties: the directions of the telescopic stream, the telescopic line feed stream and the telescopic stream are aligned with the line feed stream, the main axis is aligned with the alignment-content, the side axis is aligned with the alignment-item and the stack telescopic line is aligned with the alignment-content, so that the telescopic line feed stream attribute (the basic syntax is that box { flex-wrap: non-wrap|wrap-reverse }, wherein, the non-wrap is not by default; wrap: line feed, the first line is above; wrap-reverse: line feed, the first line is below) can be used for automatically feeding/returning to the upper line in the form display screen so as to ensure that the form page and the form display screen can automatically adapt to the sense of the form data under the condition of not damaging the element layout in the process of real-time change of the form display screen.
S7, if not needed, displaying the width according to the single form element, and displaying all the form elements in the form display screen by using a row component and a col component of the elementUI.
In step S7, the ElementUI is a set of desktop end component library based on Vue 2.0 prepared for users (such as developers, designers, product managers, etc.), and the row component and the col component are stock components in the library, which are used for ensuring that all elements are always kept in one line regardless of how the screen changes and cannot be forced to be changed by extrusion, so that the form page and the form display screen can be automatically adapted, and the perception experience of the user on the form data is ensured.
The method for self-adaptive display of the form page, which is described in the steps S1 to S7 and is suitable for the left and right double screens, provides a new scheme for dynamically adapting display of the form page on the size-changeable screen, namely, whether the form display screen in the left and right double screens triggers a screen size change event is monitored in real time, if so, the current screen width of the form display screen, the content area width of the form page, the displayable number of single form elements and the displayable width of single form elements are sequentially obtained, then, whether line feed display is needed for all the form elements of the form page is judged according to the comparison result of the total number of the form elements of the form page and the prime number of the single-row displayable form elements, and finally, the line feed display is performed in the form display screen by using an elastic box according to the single form element displayable width when needed, so that the form page can be automatically adapted and displayed along with the size change condition of the form display screen in the left and right double screens, perception of the form data is ensured, and practical application is convenient.
As shown in fig. 2, in a second aspect of the present embodiment, a virtual device for implementing the form page self-adaptive display method in the first aspect is provided, that is, a form page self-adaptive display device applicable to both left and right screens, including a change event monitoring module, a screen width obtaining module, a region width determining module, an element number determining module, a line feed display judging module, and a line feed display executing module that are sequentially connected in a communication manner.
The change event monitoring module is used for monitoring whether a form display screen in the left screen and the right screen triggers a screen size change event in real time, wherein the form display screen is a screen for displaying a form page.
The screen width acquisition module is used for acquiring the current screen width of the form display screen when determining that the form display screen in the left screen and the right screen triggers a screen size change event.
The area width determining module is used for determining the current content area width of the form page according to the current screen width.
The element number determining module is used for determining the number of single-row form elements which are currently displayed in the form display screen and the single-form element width according to the content area width.
The line feed display judging module is used for judging whether all the table unit elements of the form page need line feed display or not according to the comparison result of the total number of the table unit elements of the form page and the single-line displayable table unit number.
And the line feed display execution module is used for displaying all the form elements in a line feed manner in the form display screen by using the flexible line feed flex-wrap attribute of an elastic box display: flex layout mode according to the displayable width of the single form element when the line feed display is required for displaying all the form elements.
In one possible design, the form page self-adaptive display device further includes a non-line feed display execution module communicatively connected to the line feed display determination module.
The non-line feed display execution module is used for displaying all the form elements in the form display screen by using a row component and a col component of the ElementUI according to the single form element display width when the line feed display is not needed for all the form elements.
The working process, working details and technical effects of the foregoing device provided in the second aspect of the present embodiment may refer to the form page self-adaptive display method described in the first aspect, which are not described herein again.
As shown in fig. 3, a third aspect of the present embodiment provides a computer device for executing the form page self-adapting presentation method according to the first aspect, including a memory, a processor, and a transceiver that are sequentially communicatively connected. The memory is used for storing a computer program. The transceiver is used for receiving and transmitting messages. The processor is configured to read the computer program and execute the form page self-adaptive presentation method according to the first aspect. By way of specific example, the Memory may include, but is not limited to, random-Access Memory (RAM), read-Only Memory (ROM), flash Memory (Flash Memory), first-in first-out Memory (First Input First Output, FIFO), and/or first-in last-out Memory (First Input Last Output, FILO), etc.; the processor may be, but is not limited to, a microprocessor of the type STM32F105 family. In addition, the computer device may include, but is not limited to, a power module, a display screen, and other necessary components.
The working process, working details and technical effects of the foregoing computer device provided in the third aspect of the present embodiment may refer to the form page self-adaptive display method described in the first aspect, which is not described herein again.
A fourth aspect of the present embodiment provides a computer-readable storage medium storing instructions comprising the form-page self-adapting presentation method according to the first aspect, i.e. the computer-readable storage medium has instructions stored thereon, which when executed on a computer, perform the form-page self-adapting presentation method according to the first aspect. The computer readable storage medium refers to a carrier for storing data, and may include, but is not limited to, a floppy disk, an optical disk, a hard disk, a flash Memory, and/or a Memory Stick (Memory Stick), where the computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable devices.
The working process, working details and technical effects of the foregoing computer readable storage medium provided in the fourth aspect of the present embodiment may refer to the form page self-adaptive display method as described in the first aspect, which are not described herein again.
A fifth aspect of the present embodiment provides a computer program product comprising instructions which, when run on a computer, cause the computer to perform the form page self-adapting presentation method according to the first aspect. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus.
Finally, it should be noted that: the foregoing description is only of the preferred embodiments of the application and is not intended to limit the scope of the application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the protection scope of the present application.
Claims (10)
1. The form page self-adaptive display method suitable for the left and right double screens is characterized by comprising the following steps of:
monitoring whether a form display screen in a left screen and a right screen triggers a screen size change event in real time, wherein the form display screen is a screen for displaying form pages;
when a form display screen in a left screen and a right screen is determined to trigger a screen size change event, acquiring the current screen width of the form display screen;
determining the width of the content area of the current form page according to the current screen width;
determining the number of single-row form elements which can be displayed and the width of single form elements which can be displayed currently and in the form display screen according to the width of the content area;
judging whether all the table elements of the form page need to be displayed in a line according to the comparison result of the total number of the table elements of the form page and the number of the single-line displayable table elements;
if so, displaying the width according to the single form element, and displaying all the form elements in a line-feeding manner in the form display screen by using a flexible line-feeding flex-wrap attribute of an elastic box display: flex layout mode.
2. The form page self-adaptive presentation method of claim 1, wherein monitoring in real time whether a form presentation screen in a left and right dual screen triggers a screen size change event comprises:
based on a window.matchmedia () function, monitoring whether a form display screen in a left screen and a right screen triggers a screen size change event in real time, wherein the form display screen refers to a screen for displaying a form page.
3. The form page self-adaptive presentation method of claim 1, wherein obtaining a current screen width of the form presentation screen comprises:
and detecting the current screen width of the form display screen based on the document.
4. The form page self-adapting presentation method according to claim 1, wherein determining a content area width of the form page that is current according to the current screen width comprises:
judging whether the form page has a left side column or not;
if yes, determining that the width of the content area of the current form page is equal to the width of the current screen minus the fixed width of the left side column;
if not, determining that the width of the content area of the current form page is equal to the width of the current screen.
5. The form page self-adapting presentation method according to claim 1, wherein determining a single line form element presentable number and a single form element presentable width current and in the form presentation screen according to the content area width comprises:
when the width of the content area is within a preset width interval, determining that the number of single-row form elements which are current and in the form display screen can be displayed is equal to the preset number corresponding to the preset width interval, and determining that the width of single-row form elements which are current and in the form display screen can be displayed is equal to the width of the content area divided by the preset number, wherein the preset width interval comprises a first width interval, a second width interval or a third width interval, the first width interval is determined based on a first screen type, the second width interval is determined based on a second screen type, the third width interval is determined based on a third screen type, the size of the first screen type is smaller than the size of the second screen type, and the size of the second screen type is smaller than the size of the third screen type.
6. The form page self-adapting presentation method according to claim 1, wherein determining a single line form element presentable number and a single form element presentable width current and in the form presentation screen according to the content area width comprises:
obtaining user-defined single-row list unit elementCan show the number N uer ；
According to the width of the content area, the maximum displayable number N of single row list unit elements is calculated according to the following formula max ：
Wherein CW represents the width of the content area, CW min Represents the narrowest exposable width of a single form element, floor () represents a rounding down function;
judging the maximum displayable number N of the single row list element max Whether or not to be greater than or equal to N uer ；
If yes, determining that the number of single-row form elements which are current and in the form display screen can be displayed is equal to N uer And determining that a single form element that is current and in the form presentation screen may present a width equal to the content area width divided by N uer 。
7. The form page self-adapting display method according to any one of claims 1 to 6, wherein after judging whether or not all the form elements of the form page need line feed display according to the total number of the form elements of the form page and the single-line displayable form element number, the method further comprises:
if not, the width can be presented according to the single form element, and all form elements are presented in the form presentation screen by using the row component and the col component of the ElementUI.
8. The form page self-adaptive display device suitable for the left and right double screens is characterized by comprising a change event monitoring module, a screen width acquisition module, a region width determination module, an element number determination module, a line feed display judging module and a line feed display executing module which are sequentially connected in a communication mode;
the change event monitoring module is used for monitoring whether a form display screen in the left screen and the right screen triggers a screen size change event in real time, wherein the form display screen is a screen for displaying a form page;
the screen width acquisition module is used for acquiring the current screen width of the form display screen when determining that the form display screen in the left screen and the right screen triggers a screen size change event;
the area width determining module is used for determining the current content area width of the form page according to the current screen width;
the element number determining module is used for determining the current single-row form element presentable number and single form element presentable width in the form display screen according to the content area width;
the line feed display judging module is used for judging whether all the table unit elements of the form page need line feed display or not according to the comparison result of the total number of the table unit elements of the form page and the number of the single-row displayable table units;
and the line feed display execution module is used for displaying all the form elements in a line feed manner in the form display screen by using the flexible line feed flex-wrap attribute of an elastic box display: flex layout mode according to the displayable width of the single form element when the line feed display is required for displaying all the form elements.
9. A computer device comprising a memory, a processor and a transceiver in communication connection in turn, wherein the memory is configured to store a computer program, the transceiver is configured to send and receive messages, and the processor is configured to read the computer program and perform the form page self-adapting presentation method according to any one of claims 1 to 7.
10. A computer readable storage medium having instructions stored thereon which, when executed on a computer, perform the form page self-adapting presentation method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310481320.2A CN116578219A (en) | 2023-04-28 | 2023-04-28 | Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310481320.2A CN116578219A (en) | 2023-04-28 | 2023-04-28 | Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116578219A true CN116578219A (en) | 2023-08-11 |
Family
ID=87533282
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310481320.2A Pending CN116578219A (en) | 2023-04-28 | 2023-04-28 | Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116578219A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117196537A (en) * | 2023-09-28 | 2023-12-08 | 四川赛闯检测股份有限公司 | Visual technology-based inspection detection task management billboard |
Citations (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1845054A (en) * | 2005-04-08 | 2006-10-11 | 皮克塞(研究)有限公司 | System and method for dynamically zooming and rearranging display items |
| US20070157081A1 (en) * | 2004-07-06 | 2007-07-05 | Fujitsu Limited | Browser with screen-reading function and browsing processing method |
| CN101606124A (en) * | 2007-01-25 | 2009-12-16 | 夏普株式会社 | Multi-window managing device and program, storage medium and signal conditioning package |
| CN102073650A (en) * | 2009-11-25 | 2011-05-25 | 阿里巴巴集团控股有限公司 | Adaptive adjustment method and equipment for webpage |
| CN102129345A (en) * | 2010-01-19 | 2011-07-20 | Lg电子株式会社 | Mobile terminal and control method thereof |
| CN103412928A (en) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | Method and device for realizing browser page intelligent response-type layout on mobile terminal |
| US20140013216A1 (en) * | 2011-11-24 | 2014-01-09 | Sharp Kabushiki Kaisha | Display control device, display method, control program, and recording medium |
| CN106371810A (en) * | 2015-07-20 | 2017-02-01 | 腾讯科技（深圳）有限公司 | Method and device for partitioned block stretching in browser window |
| CN111259640A (en) * | 2018-11-15 | 2020-06-09 | 零氪科技（北京）有限公司 | Dynamic list layout method based on text content |
| CN111857332A (en) * | 2015-02-12 | 2020-10-30 | 北京三星通信技术研究有限公司 | Method and device for acquiring note information |
| CN111984351A (en) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | Page adaptation method, electronic device and computer-readable storage medium |
| US20210034816A1 (en) * | 2019-08-02 | 2021-02-04 | Spectacles LLC | Definition retrieval and display |
| WO2021068331A1 (en) * | 2019-10-11 | 2021-04-15 | 平安科技（深圳）有限公司 | Web page adaptive layout method, server and computer-readable storage medium |
| CN113536179A (en) * | 2021-06-21 | 2021-10-22 | 北京达佳互联信息技术有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN113821129A (en) * | 2020-06-19 | 2021-12-21 | 华为技术有限公司 | Display window control method and electronic equipment |
| CN113836470A (en) * | 2021-09-29 | 2021-12-24 | 浪潮卓数大数据产业发展有限公司 | Method, equipment and medium for constructing responsive data display page |
| CN114077429A (en) * | 2020-08-18 | 2022-02-22 | 华为技术有限公司 | Display interface layout method and electronic equipment |
| WO2022193616A1 (en) * | 2021-03-19 | 2022-09-22 | 掌阅科技股份有限公司 | Application page display method, electronic device, and storage medium |
| CN115935925A (en) * | 2022-10-28 | 2023-04-07 | 上海乾臻信息科技有限公司 | Form adapting method, electronic device and computer readable storage medium |
-
2023
- 2023-04-28 CN CN202310481320.2A patent/CN116578219A/en active Pending
Patent Citations (19)
| 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 (en) * | 2005-04-08 | 2006-10-11 | 皮克塞(研究)有限公司 | System and method for dynamically zooming and rearranging display items |
| CN101606124A (en) * | 2007-01-25 | 2009-12-16 | 夏普株式会社 | Multi-window managing device and program, storage medium and signal conditioning package |
| CN102073650A (en) * | 2009-11-25 | 2011-05-25 | 阿里巴巴集团控股有限公司 | Adaptive adjustment method and equipment for webpage |
| CN102129345A (en) * | 2010-01-19 | 2011-07-20 | Lg电子株式会社 | Mobile terminal and control method thereof |
| US20140013216A1 (en) * | 2011-11-24 | 2014-01-09 | Sharp Kabushiki Kaisha | Display control device, display method, control program, and recording medium |
| CN103412928A (en) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | Method and device for realizing browser page intelligent response-type layout on mobile terminal |
| CN111857332A (en) * | 2015-02-12 | 2020-10-30 | 北京三星通信技术研究有限公司 | Method and device for acquiring note information |
| CN106371810A (en) * | 2015-07-20 | 2017-02-01 | 腾讯科技（深圳）有限公司 | Method and device for partitioned block stretching in browser window |
| CN111259640A (en) * | 2018-11-15 | 2020-06-09 | 零氪科技（北京）有限公司 | Dynamic list layout method based on text content |
| US20210034816A1 (en) * | 2019-08-02 | 2021-02-04 | Spectacles LLC | Definition retrieval and display |
| WO2021068331A1 (en) * | 2019-10-11 | 2021-04-15 | 平安科技（深圳）有限公司 | Web page adaptive layout method, server and computer-readable storage medium |
| CN113821129A (en) * | 2020-06-19 | 2021-12-21 | 华为技术有限公司 | Display window control method and electronic equipment |
| CN111984351A (en) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | Page adaptation method, electronic device and computer-readable storage medium |
| CN114077429A (en) * | 2020-08-18 | 2022-02-22 | 华为技术有限公司 | Display interface layout method and electronic equipment |
| WO2022193616A1 (en) * | 2021-03-19 | 2022-09-22 | 掌阅科技股份有限公司 | Application page display method, electronic device, and storage medium |
| CN113536179A (en) * | 2021-06-21 | 2021-10-22 | 北京达佳互联信息技术有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN113836470A (en) * | 2021-09-29 | 2021-12-24 | 浪潮卓数大数据产业发展有限公司 | Method, equipment and medium for constructing responsive data display page |
| CN115935925A (en) * | 2022-10-28 | 2023-04-07 | 上海乾臻信息科技有限公司 | Form adapting method, electronic device and computer readable storage medium |
Non-Patent Citations (4)
| 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)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117196537A (en) * | 2023-09-28 | 2023-12-08 | 四川赛闯检测股份有限公司 | Visual technology-based inspection detection task management billboard |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9753929B2 (en) | Displaying changes to versioned files | |
| CA2880500C (en) | Transferring a state of an application from a first computing device to a second computing device | |
| US6983331B1 (en) | Selective display of content | |
| US9311426B2 (en) | Orientation-dependent processing of input files by an electronic device | |
| US9824137B2 (en) | Block zoom on a mobile electronic device | |
| JP2012525652A (en) | Method and apparatus for providing a scraped web page within a graphical user interface | |
| WO2005050393A2 (en) | User interface for displaying multiple applications | |
| US20120066634A1 (en) | Branded browser frame | |
| US20130073945A1 (en) | Dynamic reorganization of page elements of a web application | |
| US8959432B2 (en) | Utilizing document structure for animated pagination | |
| CN108880921A (en) | Webpage monitoring method | |
| US20130275878A1 (en) | Method, device, server, and mobile terminal for browsing web pages | |
| WO2013085592A1 (en) | Multiple tab stack user interface | |
| CN104572822A (en) | Method and device for displaying text | |
| CN111651700B (en) | Message display method and device, electronic equipment and storage medium | |
| CN116578219A (en) | Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium | |
| CN108924030A (en) | Electronic device, the method for dynamically configuration message exhibition method and storage medium | |
| CN109740081A (en) | Page loading method and device | |
| CN108369538A (en) | Download vision assets | |
| US20130067320A1 (en) | Batch Document Formatting and Layout on Display Refresh | |
| US20130063444A1 (en) | Aligning Script Animations with Display Refresh | |
| CN113127780A (en) | Page loading method and device and electronic equipment | |
| US20120105455A1 (en) | Utilizing document structure for animated pagination | |
| CN106775835A (en) | Obtain method, server and the terminal of upgrade file | |
| US20140337284A1 (en) | Synchronizing folders using a shadow folder hierarchy |
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 |