CN111610900B - Page display processing method, system and storage medium - Google Patents
Page display processing method, system and storage medium Download PDFInfo
- Publication number
- CN111610900B CN111610900B CN202010343168.8A CN202010343168A CN111610900B CN 111610900 B CN111610900 B CN 111610900B CN 202010343168 A CN202010343168 A CN 202010343168A CN 111610900 B CN111610900 B CN 111610900B
- Authority
- CN
- China
- Prior art keywords
- page
- display area
- icon
- information page
- coordinate value
- 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.)
- Active
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 12
- 238000000034 method Methods 0.000 claims abstract description 15
- 238000012544 monitoring process Methods 0.000 claims abstract description 11
- 230000001960 triggered effect Effects 0.000 claims description 3
- 238000007667 floating Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 2
- 238000009825 accumulation Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 230000001737 promoting effect Effects 0.000 description 1
- 238000011084 recovery Methods 0.000 description 1
Images
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
-
- 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/04817—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 using icons
-
- 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/0485—Scrolling or panning
-
- 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
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 invention discloses a processing method, a system and a storage medium of a display page, wherein the method comprises the following steps: generating an information page based on data acquired from the data interface; loading a part of the information page in a display area; the width of the information page is the same as that of the display area, and the length of the information page is greater than that of the display area; displaying an icon at a preset position of the display area; the layer where the icon is located on the layer where the information page is located; monitoring the coordinate value of the part of the information page in the display area in the length direction; and if the coordinate value changes more than a threshold value within a first preset time, translating at least one part of the icon out of the display area. According to the invention, the icons are hidden when the page is rolled, so that the user browsing information is prevented from being shielded by the icons. The invention can be widely applied to software technology.
Description
Technical Field
The invention relates to software technology, in particular to a page display processing method, a page display processing system and a storage medium.
Background
In the e-commerce operation process, activity needs often occur, and developers can put active links in a banner area or put the active links through a floating window (floating icon). Unlike banner, the floating window can float above the page without disappearing as the page slides. However, the floating window has the disadvantages that the page is blocked, and the user is prevented from browsing information.
Disclosure of Invention
To solve at least one of the above-mentioned technical problems, the present invention is directed to: a page display processing method, system and storage medium are provided to reduce the occlusion of an icon to a user when the user slides a page.
In a first aspect, an embodiment of the present invention provides:
a page display processing method comprises the following steps:
generating an information page based on data acquired from the data interface;
loading a part of the information page in a display area; the width of the information page is the same as that of the display area, and the length of the information page is greater than that of the display area;
displaying an icon at a preset position of the display area; the layer where the icon is located on the layer where the information page is located;
monitoring the coordinate value of the part of the information page in the display area in the length direction;
and if the coordinate value changes more than a threshold value within a first preset time, translating at least one part of the icon out of the display area.
Further, a hot area is arranged above the icon;
prior to performing the step of translating at least a portion of the icon outside of the display area, further comprising the steps of:
disabling the hotspot, or causing the hotspot to translate following the icon.
Further, the hot zone is associated with a page link, and when the hot zone is triggered, the display area displays a page of the page link.
Further, the method also comprises the following steps:
and if the coordinate value is not changed within second preset time, restoring the icon to the preset position.
Further, the determining that the change of the coordinate value in the first preset time is greater than a threshold specifically includes:
taking the first preset time as an acquisition interval, and acquiring coordinate values of the part of the information page in the display area in the length direction as a first coordinate value and a second coordinate value;
and calculating the absolute value of the difference between the first coordinate value and the second coordinate value, and when the absolute value is determined to be larger than the threshold value, determining that the change of the coordinate value is larger than the threshold value within a first preset time.
Further, the icon is a still picture or a GIF picture.
In a second aspect, an embodiment of the present invention provides:
a system for processing a page display, comprising:
a generating unit for generating an information page based on data acquired from the data interface;
a display unit for loading a part of the information page in a display area; displaying an icon at a preset position of the display area; the width of the information page is the same as that of the display area, the length of the information page is greater than that of the display area, and the layer where the icon is located on the layer where the information page is located;
the monitoring unit is used for monitoring the coordinate value of the part of the information page in the display area in the length direction;
and the icon processing unit is used for translating at least one part of the icon to the outside of the display area when the coordinate value changes more than a threshold value within a first preset time.
Further, a hot area is arranged above the icon;
prior to performing the step of translating at least a portion of the icon outside of the display area, further comprising the steps of:
disabling the hotspot, or causing the hotspot to translate following the icon.
In a third aspect, an embodiment of the present invention provides:
a processing system for page display comprises a program, a memory and a processor;
the program is stored in a memory;
the processor loads the program to execute the processing method of the page display.
In a fourth aspect, an embodiment of the present invention provides:
a storage medium storing a program which, when executed by a processor, implements the processing method for page display.
The embodiment of the invention has the beneficial effects that: in addition, the invention detects the scrolling based on the coordinate value of the page, and compared with the method of directly detecting the page scrolling through the bottom layer drive, the method is more accurate and can reduce the use times of the bottom layer drive.
Drawings
FIG. 1 is a flow chart of a method for processing a page display according to the present invention;
FIG. 2 is a schematic diagram of a first UI according to an embodiment of the invention;
FIG. 3 is a diagram of a second UI according to an embodiment of the invention.
Detailed Description
The invention is further described with reference to the drawings and the specific examples.
Referring to fig. 1, the present embodiment discloses a page display processing method, including the following steps:
In this step, the content data is obtained from the service data interface and is filled into a preset or dynamically obtained page frame to generate an information page, where the information page may be a waterfall streaming page or a page with a fixed length, and the page may be generated at one time or dynamically.
The display area can be understood as an area displayed by the display screen. Since the page can be scrolled, the display area will only display a portion of the information page. And the width of the information page is set to be the same as the width of the screen and the length is greater than the length of the display area.
Referring to fig. 2, this step displays an icon 220 at a preset position of the display area 210, where the icon 220 may be a GIF animation or a JPG picture. By setting the hot area, the user can jump to a specific URL or generate a specific screen change when clicking the icon 220.
And 140, monitoring coordinate values of the part of the information page in the display area in the length direction. Wherein the page component scrolls the page by listening for commands to slide or scroll by the underlying drive. The page comprises vertical coordinates when being generated, so that whether the page slides or not can be determined by monitoring the vertical coordinates of the information page. The vertical coordinate of the page in the display area can be represented by the vertical coordinate of the first row of pixel points displayed in the display area.
Since the underlying-driven sliding instruction does not necessarily cause the page to scroll, if the hidden timing of the icon is determined by detecting the underlying-driven sliding instruction, the complexity of the determination is increased and the icon may be hidden by mistake if the page is not slid, which may reduce the user experience.
As shown in fig. 3, the position of the display icon 220 in the display area 210 changes, and a portion thereof moves out of the display area 210.
It is understood that variations include variations in both directions of the longitudinal direction. In this embodiment, the determination may be performed based on the accumulation of the amount of change per unit time, or may be performed based on the absolute value of the change between two time points.
In some embodiments, a hot zone is disposed above the icon;
prior to performing the step of translating at least a portion of the icon outside of the display area, further comprising the steps of:
disabling the hotspot, or causing the hotspot to translate following the icon.
Specifically, in order to avoid that the user mistakenly touches the hot area of the icon during the icon hiding (partial hiding), jumping occurs, so in the present embodiment, the hot area of the icon is shifted along with the icon.
In some embodiments, the hot zone is associated with a page link, and the display area displays a page of the page link when the hot zone is triggered.
The hotspot may typically be associated with the H5 page of the promotional campaign, which jumps to the H5 page when the user clicks into the hotspot. Of course, the page pointed to by the URL associated with the hotspot may also be a generic web page, or a specific interface in APP.
In some embodiments, further comprising the steps of:
and if the coordinate value is not changed within second preset time, restoring the icon to the preset position.
When the icon is restored to the preset position after the page stops scrolling for a period of time, the icon restoration time is more reasonable compared with the scrolling instruction based on the bottom layer. The reason for this is that the scrolling duration of the page is related to the magnitude of the scrolling command, and if the scrolling command is used as the basis for icon recovery, the difficulty of the algorithm will not be increased, and if the page is still scrolling but the icon is recovered, the situation will not occur.
In some embodiments, the determining that the coordinate value changes by more than a threshold value within a first preset time is specifically:
taking the first preset time as an acquisition interval, and acquiring coordinate values of the part of the information page in the display area in the length direction as a first coordinate value and a second coordinate value;
and calculating the absolute value of the difference between the first coordinate value and the second coordinate value, and when the absolute value is determined to be larger than the threshold value, determining that the change of the coordinate value is larger than the threshold value within a first preset time.
The method for calculating the change based on the coordinate values acquired at the two time points is simple and sensitive.
In some embodiments, the icon is a still picture or a GIF picture.
The embodiment discloses a processing system for page display, which comprises:
a generating unit for generating an information page based on data acquired from the data interface;
a display unit for loading a part of the information page in a display area; displaying an icon at a preset position of the display area; the width of the information page is the same as that of the display area, the length of the information page is greater than that of the display area, and the layer where the icon is located on the layer where the information page is located;
the monitoring unit is used for monitoring the coordinate value of the part of the information page in the display area in the length direction;
and the icon processing unit is used for translating at least one part of the icon to the outside of the display area when the coordinate value changes more than a threshold value within a first preset time.
In some embodiments, a hot zone is disposed above the icon;
prior to performing the step of translating at least a portion of the icon outside of the display area, further comprising the steps of:
disabling the hotspot, or causing the hotspot to translate following the icon.
The embodiment discloses a processing system for page display, which comprises a program, a memory and a processor;
the program is stored in a memory;
the processor loads the program to execute the processing method of the page display.
The embodiment discloses a storage medium, which stores a program, and the program realizes the processing method of page display when being executed by a processor.
The step numbers in the above method embodiments are set for convenience of illustration only, the order between the steps is not limited at all, and the execution order of each step in the embodiments can be adapted according to the understanding of those skilled in the art.
While the preferred embodiments of the present invention have been illustrated and described, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.
Claims (10)
1. A page display processing method is characterized by comprising the following steps:
generating an information page based on data acquired from the data interface;
loading a part of the information page in a display area; the width of the information page is the same as that of the display area, and the length of the information page is greater than that of the display area;
displaying an icon at a preset position of the display area; the layer where the icon is located on the layer where the information page is located;
monitoring the coordinate value of the part of the information page in the display area in the length direction;
and if the coordinate value changes more than a threshold value within a first preset time, translating at least one part of the icon out of the display area.
2. A method for processing a page display according to claim 1, wherein a hot area is provided above said icon;
prior to performing the step of translating at least a portion of the icon outside of the display area, further comprising the steps of:
disabling the hotspot, or causing the hotspot to translate following the icon.
3. The method as claimed in claim 2, wherein the hot zone is associated with a page link, and when the hot zone is triggered, the display area displays a page of the page link.
4. The method for processing page display according to claim 1, further comprising the steps of:
and if the coordinate value is not changed within second preset time, restoring the icon to the preset position.
5. The method for processing a page display according to claim 1, wherein the determining that the coordinate value changes more than a threshold value within a first preset time specifically includes:
taking the first preset time as an acquisition interval, and acquiring coordinate values of the part of the information page in the display area in the length direction as a first coordinate value and a second coordinate value;
and calculating the absolute value of the difference between the first coordinate value and the second coordinate value, and when the absolute value is determined to be larger than the threshold value, determining that the change of the coordinate value is larger than the threshold value within a first preset time.
6. The method as claimed in claim 1, wherein the icon is a still picture or a GIF picture.
7. A system for processing a page display, comprising:
a generating unit for generating an information page based on data acquired from the data interface;
a display unit for loading a part of the information page in a display area; displaying an icon at a preset position of the display area; the width of the information page is the same as that of the display area, the length of the information page is greater than that of the display area, and the layer where the icon is located on the layer where the information page is located;
the monitoring unit is used for monitoring the coordinate value of the part of the information page in the display area in the length direction;
and the icon processing unit is used for translating at least one part of the icon to the outside of the display area when the coordinate value changes more than a threshold value within a first preset time.
8. A page display processing system according to claim 7, wherein a hot zone is provided above said icon;
prior to performing the step of translating at least a portion of the icon outside of the display area, further comprising the steps of:
disabling the hotspot, or causing the hotspot to translate following the icon.
9. A processing system for page display, comprising a program, a memory, and a processor;
the program is stored in a memory;
the processor loads the program to perform the method of any one of claims 1-6.
10. A storage medium storing a program, wherein the program, when executed by a processor, implements the method of any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010343168.8A CN111610900B (en) | 2020-04-27 | 2020-04-27 | Page display processing method, system and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010343168.8A CN111610900B (en) | 2020-04-27 | 2020-04-27 | Page display processing method, system and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111610900A CN111610900A (en) | 2020-09-01 |
| CN111610900B true CN111610900B (en) | 2021-07-20 |
Family
ID=72203178
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010343168.8A Active CN111610900B (en) | 2020-04-27 | 2020-04-27 | Page display processing method, system and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111610900B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105989051A (en) * | 2015-02-05 | 2016-10-05 | 阿里巴巴集团控股有限公司 | Page positioning method and device |
| CN107247748A (en) * | 2017-05-24 | 2017-10-13 | 北京潘达互娱科技有限公司 | Page loading method and device |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7877702B2 (en) * | 2007-11-20 | 2011-01-25 | International Business Machines Corporation | Tree widget data population |
| CN106126075A (en) * | 2016-06-30 | 2016-11-16 | 乐视控股（北京）有限公司 | Control the method and device that buoy shows |
| CN108009185B (en) * | 2016-10-31 | 2022-02-18 | 阿里巴巴集团控股有限公司 | Method and device for providing page information |
| CN106909377B (en) * | 2017-02-21 | 2020-08-11 | 北京安云世纪科技有限公司 | Hot area page processing method and device |
-
2020
- 2020-04-27 CN CN202010343168.8A patent/CN111610900B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105989051A (en) * | 2015-02-05 | 2016-10-05 | 阿里巴巴集团控股有限公司 | Page positioning method and device |
| CN107247748A (en) * | 2017-05-24 | 2017-10-13 | 北京潘达互娱科技有限公司 | Page loading method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111610900A (en) | 2020-09-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9805377B2 (en) | Unified content visibility | |
| US9756140B2 (en) | Tracking user behavior relative to a network page | |
| US9069416B2 (en) | Method and system for selecting content using a touchscreen | |
| KR101858420B1 (en) | Revealing of truncated content on scrollable grid | |
| US20170220220A1 (en) | Advertisement generation apparatus and terminal device | |
| US20120054612A1 (en) | Method and apparatus for playing contents | |
| CN107391012B (en) | A kind of information cuing method and mobile terminal | |
| EP2169527A1 (en) | Method and apparatus for displaying content at a mobile device | |
| JP2011128204A (en) | Advertisement distribution device, method, and program | |
| US9563327B1 (en) | Intelligent adjustment of graphical user interfaces | |
| US20130211923A1 (en) | Sensor-based interactive advertisement | |
| CN106681616B (en) | Method, device and equipment for displaying function bar of browser | |
| CN105872713B (en) | Method and device for displaying additional media information | |
| CN104166553A (en) | Display method and electronic device | |
| CN103336787B (en) | A kind of method and apparatus for scaling webpage | |
| KR101866350B1 (en) | Computing device and control method thereof | |
| CN111078035A (en) | Drawing method based on HTML5Canvas | |
| US9529779B2 (en) | Detection and repositioning of pop-up dialogs | |
| CN104978135B (en) | A kind of icon display method, device and mobile terminal | |
| JP5563703B2 (en) | Content distribution apparatus, content distribution method, content distribution program, and terminal program | |
| US8504940B1 (en) | Smooth hardware accelerated scrolling | |
| CN111610900B (en) | Page display processing method, system and storage medium | |
| JP6339550B2 (en) | Terminal program, terminal device, and terminal control method | |
| CN108604142A (en) | A kind of touch-screen equipment operating method and touch-screen equipment | |
| CN110989895B (en) | Control display state detection method and device |
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 | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240322 Address after: Room 3103, No. 32 Huaxia Road, Tianhe District, Guangzhou City, Guangdong Province, 510000 Patentee after: Guangzhou Mailiang Technology Co.,Ltd. Country or region after: China Address before: 3801, 3802, 3803, No. 285, Linhe East Road, Tianhe District, Guangzhou, Guangdong 510000 Patentee before: Guangzhou Xiaomai Network Technology Co.,Ltd. Country or region before: China |
|
| TR01 | Transfer of patent right |