CN111949900B - Display method, device, equipment and storage medium - Google Patents
Display method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN111949900B CN111949900B CN202010808704.7A CN202010808704A CN111949900B CN 111949900 B CN111949900 B CN 111949900B CN 202010808704 A CN202010808704 A CN 202010808704A CN 111949900 B CN111949900 B CN 111949900B
- Authority
- CN
- China
- Prior art keywords
- display area
- sub
- main body
- display
- content
- 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
- 238000000034 method Methods 0.000 title claims abstract description 43
- 230000003044 adaptive effect Effects 0.000 claims abstract description 19
- 230000015654 memory Effects 0.000 claims description 17
- 238000004590 computer program Methods 0.000 claims description 9
- 230000000694 effects Effects 0.000 abstract description 9
- 238000005096 rolling process Methods 0.000 abstract description 4
- 230000004044 response Effects 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 8
- 230000007246 mechanism Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000000052 comparative effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/954—Navigation, e.g. using categorised browsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- 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/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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Radar, Positioning & Navigation (AREA)
- Remote Sensing (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a display method, a display device, display equipment and a storage medium, relates to the technical field of computers, and particularly relates to the technical field of interface display. The specific implementation scheme is as follows: displaying a first web page in a target display interface of a display device, the first web page including a main body display area, the main body display area being adapted to a display size of the target display interface; the main body display area comprises a first sub display area, and the first sub display area is adaptive to the display size of the main body display area; in response to the sliding operation performed on the first sub-display area, scrolling the content in the container corresponding to the first sub-display area, and triggering and displaying a second sub-display area included in the main body display area, wherein the second sub-display area is fixed at a preset position of the main body display area. The application improves the fixing effect of the webpage fixed position element in the webpage rolling process.
Description
Technical Field
The application relates to the technical field of computers, in particular to the technical field of interface display.
Background
In the mobile device, because of factors such as equipment and a technical scheme, when a user opens a webpage, the following two conditions of non-ideal experience exist (1) that the experience difference of fixed positions of webpage elements under different system equipment is obvious, and (2) that the experience difference of fixed positions of different versions of webpage elements in the same system is obvious. One prior art approach to solving the above problems is to use a web page element, such as a navigation bar, that is fixed relative to the display interface. However, in some system versions, the fixed-location web page elements used in the page scrolling process will scroll along with the page scrolling, and return to the original fixed location after the scrolling is stopped.
Disclosure of Invention
The application provides a display method, a display device, display equipment and a storage medium.
According to an aspect of the present application, there is provided a display method including:
Displaying a first web page in a target display interface of a display device, the first web page including a main body display area, the main body display area being adapted to a display size of the target display interface; the main body display area comprises a first sub display area, and the first sub display area is adaptive to the display size of the main body display area;
In response to the sliding operation performed on the first sub-display area, scrolling the content in the container corresponding to the first sub-display area, and triggering and displaying a second sub-display area included in the main body display area, wherein the second sub-display area is fixed at a preset position of the main body display area.
According to another aspect of the present application, there is provided a display device including:
The first webpage display module is used for displaying a first webpage in a target display interface of the display device, wherein the first webpage comprises a main body display area which is self-adaptive to the display size of the target display interface; the main body display area comprises a first sub display area, and the first sub display area is adaptive to the display size of the main body display area;
The scrolling module is used for responding to the sliding operation implemented in the first sub-display area, scrolling and displaying the content in the container corresponding to the first sub-display area, and triggering and displaying a second sub-display area contained in the main body display area, wherein the second sub-display area is fixed at a preset position of the main body display area.
According to another aspect of the application, there is provided a computer program product comprising a computer program which, when executed by a processor, implements a method as described above.
According to the technology provided by the application, the fixing effect of the webpage fixed position element in the webpage rolling process is improved.
It should be understood that the description in this section is not intended to identify key or critical features of the embodiments of the application or to delineate the scope of the application. Other features of the present application will become apparent from the description that follows.
Drawings
The drawings are included to provide a better understanding of the present application and are not to be construed as limiting the application. Wherein:
FIG. 1 is a flow chart of a display method according to an embodiment of the application;
FIG. 2 is an exemplary diagram of web page scrolling in accordance with the prior art;
FIG. 3 is an exemplary illustration of web page scrolling in accordance with a display method of an embodiment of the present application;
FIG. 4 is a diagram of a comparative example of web page scrolling and browsing in accordance with the prior art and embodiments of the present application;
FIG. 5 is a second flowchart of a display method according to an embodiment of the present application;
FIG. 6 is an exemplary illustration of web page scrolling through a display method in accordance with an embodiment of the present application;
fig. 7 is a structural diagram of a display device according to an embodiment of the present application;
FIG. 8 is a block diagram II of a display method according to an embodiment of the present application;
fig. 9 is a block diagram of an electronic device for implementing a display method of an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present application will now be described with reference to the accompanying drawings, in which various details of the embodiments of the present application are included to facilitate understanding, and are to be considered merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the application. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Referring to fig. 1, fig. 1 shows a flowchart of a display method according to an embodiment of the present application, where the display method includes:
s101, displaying a first webpage in a target display interface of display equipment, wherein the first webpage comprises a main body display area, and the main body display area is adaptive to the display size of the target display interface; the main body display area comprises a first sub display area, and the first sub display area is adaptive to the display size of the main body display area;
s102, responding to the sliding operation implemented in the first sub-display area, scrolling and displaying the content in the container corresponding to the first sub-display area, and triggering and displaying a second sub-display area contained in the main body display area, wherein the second sub-display area is fixed at a preset position of the main body display area.
The display device can be a mobile phone, a tablet, a notebook computer, an intelligent wearing device, a desktop computer, a projector and the like.
And the main body display area is used for displaying user visible content in the first webpage, wherein the user visible content comprises, but is not limited to, characters, jump links, images, videos and the like.
The target display interface is a display interface which is distributed by the display equipment and used for displaying the first webpage.
Due to the limited size of the main body display area, only a portion of the user viewable content is often displayed, at which time it is desirable to scroll through a portion of the user viewable content in the web page in the main body display area.
Taking a shopping website as an example, a commodity classification navigation bar of the shopping website and recommended commodities under each classification are displayed in the main body display area. The user realizes the rolling display of various recommended commodities in the main body display area through the sliding operation implemented in the main body display area so as to browse more commodities. Meanwhile, the commodity classification navigation bar is fixed relative to the display interface, namely does not roll along with the main body display area, so that a user can select corresponding commodity classifications at any time.
Referring to fig. 2, since the product category navigation bar is fixed with respect to the display interface, the product category navigation bar cannot be accurately fixed during scrolling of the display contents of the main display area, scrolling occurs with a page, and returns to the original fixed position when scrolling is stopped.
According to the embodiment of the application, the main body display area is adaptive to the size of the target display interface, and the first sub-display area is adaptive to the display size of the main body display area, namely, the first sub-display area covers the whole main body display area. It can be seen that the sliding operation of the user acts on the first sub-display area, and cannot act on the main body display area.
Referring to fig. 3, the position of the main body display area with respect to the target display interface remains fixed during the sliding operation by the user. Correspondingly, the second sub-display area arranged at the preset position on the main body display area is also kept fixed relative to the target display interface. Therefore, the fixed display of the webpage fixed element on the target display interface is realized.
Referring to fig. 4, fig. 4 is a rolling comparison diagram of fig. 2 and fig. 3, and as can be seen from fig. 4, the fixing effect of the web page element according to the embodiment of the application is better.
And, by setting the visible content in the webpage for the user to scroll and view in the container corresponding to the first sub-display area, various types of recommended commodities in the example are recommended. Then, the user can scroll to view more webpage content in the first sub-display area by performing the sliding operation on the first sub-display area, which is beneficial to ensuring the browsing requirement of the user on the webpage content.
In addition, the webpage display scheme provided by the embodiment of the application can be compatible with the webpage scrolling of a multi-device multi-operation system, and provides a better experience effect of element fixed positions.
In one embodiment, in step S101, the main body display area is adaptive to a display size of the target display interface, and includes: the main body display area is adaptive to the display height of the display interface.
The benefit of this is that the first sub-display area element is given an inheritable height. And secondly, the height of the main body display area is equal to the visible height of the device. Thirdly, a basis is provided for the second sub-display area to be positioned to an accurate position.
In addition, the main body display area is adaptive to the display size of the target display interface, and further includes: the width of the main body display area is adaptive to the display width of the target display interface.
Optionally, the content that overflows the first body display area is hidden and no scrolling mechanism is provided.
In one embodiment, in step S101, the first sub-display area is adaptive to a display size of the main body display area, and includes: the first sub-display area is height-adaptive to the display height of the main body display area.
Optionally, the first sub-display area is adaptive to a display size of the main body display area, and further includes: the width of the first sub-display area is adaptive to the display width of the main body display area.
Optionally, the content that overflows the first sub-display area in the horizontal direction is hidden, and no scrolling mechanism is provided.
Optionally, the content that overflows the first sub-display area in the vertical direction is hidden, and a scrolling mechanism is provided.
Optionally, when the content in the container corresponding to the first sub-display area exceeds the first sub-display area, the first sub-display area can be scrolled up and down for viewing.
In one embodiment, the first sub-display area and the second sub-display area belong to a peer sub-area of the main body display area.
In one embodiment, referring to fig. 5, step S102 includes:
s501, determining a first distance between specified content in a container and a specified position of a first sub-display area when the content in the container corresponding to the first sub-display area is displayed in a scrolling mode;
s502, triggering a second sub-display area contained in the display main body display area when the first distance is within a preset range.
The effect presented by this embodiment is that the second sub-display area is displayed on the target display interface when the user browses a portion of the content in the container corresponding to the first sub-display area. For example, when the user browses to later content in the web page, a second sub-display area may be provided for displaying a web page navigation bar for the user to select to return to the previously browsed web page content. The method is beneficial to improving user experience.
Optionally, the preset range in step S502 is less than or equal to zero.
In one embodiment, referring to fig. 5, in step S102, the method further includes:
s503, hiding the second sub-display area contained in the main body display area when the first distance exceeds the preset range.
The effect presented by this embodiment is that the second sub-display area is hidden on the target display interface when the user browses a portion of the content in the container corresponding to the first sub-display area. For example, when the user initially opens the web page, the web page header content is an active poster, and the second sub-display area is hidden for the aesthetic degree of the active poster at this time.
In one embodiment, the display content in the second sub-display area includes specified content.
The effect presented by this embodiment is that when the specified content in the container corresponding to the first sub-display area reaches the specified position, the specified content is fixed on the target display interface. When the web page is rolled, a certain appointed content in the web page is changed into fixed display when rolled to an appointed position, and the web page display style is enriched.
In one embodiment, the designated location is located at the top of the first sub-display area.
The designated position is set at the top of the first sub-display area such that when the designated content scrolls to or overflows the top of the first sub-display area, the display of the second sub-display area is triggered.
In one embodiment, the predetermined position of the second sub-display area is located at the top of the main display area.
Setting the second sub-display area on top of the first sub-display area may enable, for example, a top navigation bar, a search bar, etc. in a web page. And the fixed content of the webpage is presented at the top, so that the user habit is met, and the user experience is improved.
In addition, the preset position may be selectively set at a position at the bottom of the main body display area or at both left and right sides.
Referring to fig. 6, fig. 6 is a diagram illustrating an example of web browsing in combination with the above embodiments. (1) When the user initially opens the webpage, the second sub-display area is not presented in the main body display area. (2) Along with the sliding operation of the user, the content in the container corresponding to the first sub-display area is displayed in a scrolling mode, and the designated content appears in the first sub-display area. (3) When the appointed content is scrolled to the top of the first sub-display area, the second sub-display area is triggered to be displayed, and the content displayed in the second sub-display area is the appointed content. (4) The user continues to slide, designating content to overflow from the top of the first sub-display area, and maintaining the second sub-display area displayed.
In one embodiment, the second sub-display area is overlaid on the first sub-display area.
And setting the second sub-display area to cover the first sub-display area by setting the relation of the cover layers, so that a user can see the second sub-display area on the target display interface.
The following is an example provided for an embodiment of the present application. The present example may be applied in the context of a variety of operating systems. For example, an apple mobile device operating system (i.e., IOS system) application web environment and a apple phone browser (i.e., sarfari browser), or an android system, etc.
The first web page includes a body element, a container element, and a fixed location element.
Wherein the container element and the fixed location element are direct sub-elements of the body element.
The container element is an application (app) element in an MVVM (practice, vue) framework unified page structure. The MVVM is a shorthand of Model-View-ViewModel, and consists of three parts, namely a View (View), a View Model (ViewModel) and a Model (Model), and UI logic, presentation logic, state control and separation of data and business logic are realized through the three parts. React is a declarative, efficient and flexible JavaScript library for building a user interface. Vue is a set of progressive JavaScript frames used to build a user interface. JavaScript is a programming language.
The main body display area is a display area of a main body (body) element, the first sub display area represents a display area of a container element, and the second sub display area is a display area of a fixed position element.
The cascading style sheet (CASCADING STYLE SHEETS, CSS) rules for each element in the first web page are as follows:
1. Main body element:
(1) The height (height) of the subject display region is 100%;
(2) Hiding the content that overflows the subject display area does not provide a scrolling mechanism (i.e., overflow: hidden).
2. Container element:
(1) The height (height) of the first display area is 100%;
(2) Hiding content that overflows horizontally into the first sub-display area does not provide a scrolling mechanism (i.e., overflow-x: hidden), and hiding content that overflows vertically into the first sub-display area provides a scrolling mechanism (i.e., overflow-y: auto).
3. Fixed position element:
(1) The position of the second sub-display area is an absolute position (i.e., position: absolute).
(2) If the fixed position element is to be fixed to the top position of the page, the distance from the top to be zero, namely top is 0; setting the distance from the bottom to zero if the page is to be scrolled to the bottom, wherein the bottom is 0; if any position is to be fixed, the value of top or bottom can be adjusted.
In addition, the parsing and rendering techniques of the present example for web pages may employ: based on the W3C standard, parsing and rendering of file formats such as hypertext markup language (Hyper Text Markup Language, HTML), hypertext 5 (HTML 5), JS (JavaScript), cascading Style Sheets (CSS), pictures, text, audio-video, and animation are performed.
The example combines the effect that a scrolling container element (such as an app element) is included under a main body element based on a webpage, and an element fixing position in the page scrolling process is realized in an absolute positioning mode, so that the method is more direct, more convenient, lower in realization cost, better in effect and compatible with all devices and systems.
In summary, the webpage display method provided by the embodiment of the application has better compatibility to equipment and an operating system, and can promote the overall webpage browsing experience.
Referring to fig. 7, fig. 7 is a display device according to an embodiment of the present application, including:
a first web page display module 701, configured to display a first web page in a target display interface of a display device, where the first web page includes a main body display area, and the main body display area is adaptive to a display size of the target display interface; the main body display area comprises a first sub display area, and the first sub display area is adaptive to the display size of the main body display area;
A scrolling module 702, configured to scroll and display contents in a container corresponding to the first sub-display area in response to a sliding operation performed on the first sub-display area; and triggering a second sub-display area contained in the main body display area, wherein the second sub-display area is fixed at a preset position of the main body display area.
In one embodiment, referring to fig. 8, a scroll module 702 includes:
A distance determining sub-module 801, configured to determine, when content in a container corresponding to the first sub-display area is scroll-displayed, a first distance between a specified content in the container and a specified position of the first sub-display area;
The second sub-display area display sub-module 802 is configured to trigger to display a second sub-display area included in the main display area if the first distance is within a preset range.
In one embodiment, the scroll module 702 further includes:
The second sub-display area hiding sub-module 803 is configured to hide the second sub-display area included in the main body display area when the first distance exceeds the preset range.
In one embodiment, the display content in the second sub-display area includes specified content.
In one embodiment, the designated location is located at the top of the first sub-display area.
In one embodiment, the preset position is located at the top of the main body display area.
In one embodiment, the second sub-display area is overlaid on the first sub-display area.
According to embodiments of the present application, the present application also provides an electronic device, a readable storage medium and a computer program product.
As shown in fig. 9, there is a block diagram of an electronic device of a display method according to an embodiment of the present application. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the applications described and/or claimed herein.
As shown in fig. 9, the electronic device includes: one or more processors 901, memory 902, and interfaces for connecting the components, including high-speed interfaces and low-speed interfaces. The various components are interconnected using different buses and may be mounted on a common motherboard or in other manners as desired. The processor may process instructions executing within the electronic device, including instructions stored in or on memory to display graphical information of the GUI on an external input/output device, such as a display device coupled to the interface. In other embodiments, multiple processors and/or multiple buses may be used, if desired, along with multiple memories and multiple memories. Also, multiple electronic devices may be connected, each providing a portion of the necessary operations (e.g., as a server array, a set of blade servers, or a multiprocessor system). In fig. 9, a processor 901 is taken as an example.
Memory 902 is a non-transitory computer readable storage medium provided by the present application. The memory stores instructions executable by the at least one processor to cause the at least one processor to perform the display method provided by the present application. The non-transitory computer readable storage medium of the present application stores computer instructions for causing a computer to execute the display method provided by the present application.
The memory 902 is used as a non-transitory computer readable storage medium for storing non-transitory software programs, non-transitory computer executable programs, and modules, such as program instructions/modules (e.g., the first web page display module 701 and the scroll module 702 shown in fig. 7) corresponding to the display method in the embodiment of the application. The processor 901 performs various functional applications of the server and data processing, i.e., implements the display method in the above-described method embodiment, by running non-transitory software programs, instructions, and modules stored in the memory 902.
The memory 902 may include a storage program area and a storage data area, wherein the storage program area may store an operating system, at least one application program required for a function; the storage data area may store data created according to the use of the display electronic device, and the like. In addition, the memory 902 may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory 902 optionally includes memory remotely located relative to processor 901, which may be connected to the display electronic device via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The electronic device of the display method may further include: an input device 903 and an output device 904. The processor 901, memory 902, input devices 903, and output devices 904 may be connected by a bus or other means, for example in fig. 9.
The input device 903 may receive input numeric or character information and generate key signal inputs related to user settings and function control of the electronic device of the display method, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, a pointer stick, one or more mouse buttons, a track ball, a joystick, etc. The output means 904 may include a display device, auxiliary lighting means (e.g., LEDs), tactile feedback means (e.g., vibration motors), and the like. The display device may include, but is not limited to, a Liquid Crystal Display (LCD), a Light Emitting Diode (LED) display, and a plasma display. In some implementations, the display device may be a touch screen.
Various implementations of the systems and techniques described here can be realized in digital electronic circuitry, integrated circuitry, application specific ASIC (application specific integrated circuit), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.
These computing programs (also referred to as programs, software applications, or code) include machine instructions for a programmable processor, and may be implemented in a high-level procedural and/or object-oriented programming language, and/or in assembly/machine language. As used herein, the terms "machine-readable medium" and "computer-readable medium" refer to any computer program product, apparatus, and/or device (e.g., magnetic discs, optical disks, memory, programmable Logic Devices (PLDs)) used to provide machine instructions and/or data to a programmable processor, including a machine-readable medium that receives machine instructions as a machine-readable signal. The term "machine-readable signal" refers to any signal used to provide machine instructions and/or data to a programmable processor.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and pointing device (e.g., a mouse or trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), and the internet.
The computer system may include a client and a server. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server can be a cloud server, also called a cloud computing server or a cloud host, and is a host product in a cloud computing service system, so that the defects of high management difficulty and weak service expansibility in the traditional physical host and Virtual Private Server (VPS) service are overcome.
It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps described in the present application may be performed in parallel, sequentially, or in a different order, so long as the desired results of the technical solution disclosed in the present application can be achieved, and are not limited herein.
The above embodiments do not limit the scope of the present application. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present application should be included in the scope of the present application.
Claims (15)
1. A display method, comprising:
Displaying a first webpage in a target display interface of a display device, the first webpage comprising a main body display area, the main body display area being adaptive to a display size of the target display interface; the main body display area comprises a first sub display area, and the first sub display area is adaptive to the display size of the main body display area;
responding to the sliding operation of the first sub-display area, scrolling and displaying the content in the container corresponding to the first sub-display area, and triggering and displaying a second sub-display area contained in the main body display area, wherein the second sub-display area is fixed at a preset position of the main body display area;
The triggering display of the second sub-display area included in the main display area includes:
determining a first distance between specified content in a container corresponding to the first sub-display area and a specified position of the main body display area when the content in the container is displayed in a scrolling manner;
And triggering and displaying a second sub-display area contained in the main body display area under the condition that the first distance is in a preset range.
2. The method of claim 1, further comprising:
and hiding the second sub-display area contained in the main body display area under the condition that the first distance exceeds a preset range.
3. The method of claim 1, wherein,
The display content in the second sub-display area includes the specified content.
4. The method of claim 1, wherein,
The designated location is located at the top of the main body display area.
5. The method according to any one of claim 1 to 4, wherein,
The preset position is positioned at the top of the main body display area.
6. The method of any of claims 1-4, wherein the second sub-display area overlies the first sub-display area.
7. A display device, comprising:
The first webpage display module is used for displaying a first webpage in a target display interface of display equipment, wherein the first webpage comprises a main body display area which is self-adaptive to the display size of the target display interface; the main body display area comprises a first sub display area, and the first sub display area is adaptive to the display size of the main body display area;
The scrolling module is used for responding to the sliding operation implemented in the first sub-display area, scrolling and displaying the content in the container corresponding to the first sub-display area, and triggering and displaying a second sub-display area contained in the main body display area, wherein the second sub-display area is fixed at a preset position of the main body display area;
wherein,
The scrolling module includes:
A distance determining sub-module, configured to determine, when the content in the container corresponding to the first sub-display area is displayed in a scrolling manner, a first distance between a specified content in the container and a specified position of the main body display area;
And the second sub-display area display sub-module is used for triggering and displaying the second sub-display area contained in the main body display area under the condition that the first distance is within a preset range.
8. The apparatus of claim 7, the scrolling module further comprising:
and the second sub-display area hiding sub-module is used for hiding the second sub-display area contained in the main body display area under the condition that the first distance exceeds a preset range.
9. The apparatus of claim 7, wherein,
The display content in the second sub-display area includes the specified content.
10. The apparatus of claim 7, wherein,
The designated location is located at the top of the main body display area.
11. The device according to any one of claims 7 to 10, wherein,
The preset position is positioned at the top of the main body display area.
12. The apparatus of any of claims 7 to 10, wherein the second sub-display area is overlaid on top of the first sub-display area.
13. An electronic device, comprising:
at least one processor; and
A memory communicatively coupled to the at least one processor; wherein,
The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-6.
14. A non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of any one of claims 1-6.
15. A computer program product comprising a computer program which, when executed by a processor, implements the method according to any of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010808704.7A CN111949900B (en) | 2020-08-12 | 2020-08-12 | Display method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010808704.7A CN111949900B (en) | 2020-08-12 | 2020-08-12 | Display method, device, equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111949900A CN111949900A (en) | 2020-11-17 |
| CN111949900B true CN111949900B (en) | 2024-05-17 |
Family
ID=73333028
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010808704.7A Active CN111949900B (en) | 2020-08-12 | 2020-08-12 | Display method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111949900B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113262474B (en) * | 2021-06-04 | 2024-10-18 | 网易（杭州）网络有限公司 | Display control method and device in game and electronic equipment |
| CN113703657A (en) * | 2021-08-26 | 2021-11-26 | 北京房江湖科技有限公司 | Control method and device for element fixed display, storage medium and electronic equipment |
| CN114489901B (en) * | 2022-01-25 | 2024-07-02 | 北京百度网讯科技有限公司 | Timing progress display method, device, equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107066174A (en) * | 2017-04-13 | 2017-08-18 | 广州神马移动信息科技有限公司 | Floating layer display methods, device and user terminal |
| WO2019080065A1 (en) * | 2017-10-26 | 2019-05-02 | 华为技术有限公司 | Display method and apparatus |
| CN111414112A (en) * | 2020-03-05 | 2020-07-14 | 联想(北京)有限公司 | Information display method and device and electronic equipment |
| CN111435277A (en) * | 2019-01-15 | 2020-07-21 | Oppo广东移动通信有限公司 | Method, device, terminal and storage medium for displaying content |
-
2020
- 2020-08-12 CN CN202010808704.7A patent/CN111949900B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107066174A (en) * | 2017-04-13 | 2017-08-18 | 广州神马移动信息科技有限公司 | Floating layer display methods, device and user terminal |
| WO2019080065A1 (en) * | 2017-10-26 | 2019-05-02 | 华为技术有限公司 | Display method and apparatus |
| CN111435277A (en) * | 2019-01-15 | 2020-07-21 | Oppo广东移动通信有限公司 | Method, device, terminal and storage medium for displaying content |
| CN111414112A (en) * | 2020-03-05 | 2020-07-14 | 联想(北京)有限公司 | Information display method and device and electronic equipment |
Non-Patent Citations (1)
| Title |
|---|
| 一种服务于Android移动设备的自适应滚屏技术;毛昊;;软件;20180315(03);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111949900A (en) | 2020-11-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8645849B2 (en) | Method and apparatus for providing portioned web pages in a graphical user interface | |
| CN111949900B (en) | Display method, device, equipment and storage medium | |
| US9489121B2 (en) | Optimal display and zoom of objects and text in a document | |
| US8881055B1 (en) | HTML pop-up control | |
| CN102117290B (en) | Method and system used for showing page elements in webpage | |
| CN106156066B (en) | Page switching method, device and client | |
| US10878175B2 (en) | Portlet display on portable computing devices | |
| CN108255923B (en) | Image display method and device and electronic device | |
| US8949707B2 (en) | Adaptive document displaying apparatus and method | |
| US20150363366A1 (en) | Optimized document views for mobile device interfaces | |
| US8504915B2 (en) | Optimizations for hybrid word processing and graphical content authoring | |
| CN109062653B (en) | Long image-text information display method, computer device and computer readable storage medium | |
| US11295708B2 (en) | Two-dimensional indication in contents | |
| US20160026609A1 (en) | Appending New Content to Open Content | |
| US20170249076A1 (en) | User interfaces for presenting content items to users | |
| US20150205514A1 (en) | Using a scroll bar in a multiple panel user interface | |
| CN111159547A (en) | Information display method and device, electronic equipment and computer storage medium | |
| US20160231894A1 (en) | Parallax Discrete Page Scrolling | |
| EP3005083B1 (en) | Input object configured to route input for a visual element to a graphic framework | |
| EP4498264A1 (en) | Information display method and apparatus, electronic device, and storage medium | |
| CN113515210A (en) | Display method, display device, electronic equipment and storage medium | |
| WO2016107871A1 (en) | Adaptive method for device independent web page presentation | |
| US20140372935A1 (en) | Input Processing based on Input Context | |
| CN115309319B (en) | Picture previewing method and device, electronic equipment and storage medium | |
| CN115203437A (en) | Method, device and equipment for displaying entity relationship diagram and storage medium |
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 |