CN111061415B - Page processing method and computing device - Google Patents
Page processing method and computing device Download PDFInfo
- Publication number
- CN111061415B CN111061415B CN201911249030.5A CN201911249030A CN111061415B CN 111061415 B CN111061415 B CN 111061415B CN 201911249030 A CN201911249030 A CN 201911249030A CN 111061415 B CN111061415 B CN 111061415B
- Authority
- CN
- China
- Prior art keywords
- sliding
- display
- touch
- value
- event
- 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
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/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
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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
- G06F3/04855—Interaction with scrollbars
-
- 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)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a page processing method, which comprises the following steps: marking a first element to be processed arranged on a page; inserting at least one second element adjacent to the first element according to the display effect; determining a value of a touch event in response to a sliding touch operation of the first element by a user; a display value of the second element is determined based on the value of the touch event. The invention also discloses corresponding computing equipment.
Description
Technical Field
The invention relates to the technical field of page display, in particular to a page processing method and computing equipment.
Background
In the front-end technology, the rolling rebound effect of the page refers to an effect that a user continues to drag the page when the page is rolled to the bottom or to the top, the page continues to move in a rolling direction in a small amplitude, and when the user releases the page, the page returns to an initial position again at a certain speed. Currently only iOS systems and parts of browsers are available on the market to support this effect.
In most browsers, the Javascript library is relied upon to achieve this effect. Usually, a Javascript library is relied on to realize the rebound effect, and the realization mode is to simulate the browser scrolling by using requestanimation frame + transform. The method is implemented by monitoring a touch or drag or a scroll wheel event of a page, then changing a displacement (x or y) value in transform of the page in real time through a requestAnimationFrame, continuously changing the value after the displacement value reaches a critical value, and finally, after the page is scrolled or dragged, setting the displacement value back to the critical value at a certain speed.
The method for simulating the browser scrolling is to give up the default browser scrolling firstly, and is slightly different from the default browser scrolling in view of scrolling effect. The second is the handling of the scroll bar and the dispatching of scroll events, which are all self-implemented by the maintainer who needs the library. Moreover, the support of the mouse wheel also needs to enable additional configuration items, and the relevant parameters of the simulated scrolling also need to be refreshed when the screen is rotated or other operations for changing the screen size are carried out. Most libraries, while providing a default refresh mechanism, are problematic in some special cases, requiring developers to be able to do so with practical experience and power. And finally, when the scroll block is scrolled to the bottom or is scrolled to the top, the parent element cannot be triggered to scroll, but the rebound effect is directly generated, and if the parent element is triggered to scroll, the developer needs to realize the scroll by himself or perform other configurations to achieve the aim.
In view of the above, a scroll rebounding method applicable to a browser is needed to overcome the above compatibility problems.
Disclosure of Invention
To this end, the present invention provides a page processing scheme in an attempt to solve or at least alleviate at least one of the problems presented above.
According to an aspect of the present invention, there is provided a page processing method, including the steps of: marking a first element to be processed arranged on a page; inserting at least one second element adjacent to the first element according to the display effect; determining a value of a touch event in response to a sliding touch operation of the first element by a user; a display value of the second element is determined based on the value of the touch event.
Optionally, the method according to the invention further comprises the steps of: generating a display effect of the page based on the display value of the second element.
Optionally, in the method according to the present invention, the step of inserting at least one second element adjacent to the first element according to the display effect comprises: if the display effect is rebound display in the vertical direction, inserting two second elements adjacent to the first element in the vertical direction; and if the display effect is rebound display in the horizontal direction, inserting two second elements adjacent to the first element in the horizontal direction.
Optionally, in the method according to the present invention, before the step of determining the value of the touch event in response to the sliding touch operation of the first element by the user, the method further includes the steps of: and setting a sliding touch event for the first element, wherein the sliding touch event comprises a touch start event, a touch sliding event and a touch end event.
Optionally, in the method according to the present invention, the step of determining the value of the touch event in response to a sliding touch operation of the first element by the user includes: recording a touch starting position as a value of a touch starting event in response to a touch operation of a user on a first element; recording the sliding position in real time as the value of a touch sliding event in the sliding process of the first element by the user; when the user stops the touch operation on the first element, the value of the touch end event is set.
Optionally, in the method according to the present invention, the step of determining the display value of the second element according to the value of the touch event comprises: determining a sliding distance and a sliding direction based on the value of the touch start event and the value of the touch sliding event; determining a second element to be displayed based on the sliding direction; setting the determined display height or display width of the second element based on the sliding distance; and setting the display height or the display width of the second element again based on the value of the touch end event.
Optionally, in the method according to the present invention, the step of determining the second element to be displayed based on the sliding direction further includes: when the sliding direction is vertical and upward sliding, determining a second element positioned below the first element as a second element to be displayed; when the sliding direction is vertical downward sliding, determining a second element positioned above the first element as a second element to be displayed; when the sliding direction is horizontal leftward sliding, determining a second element positioned at the right side of the first element as a second element to be displayed; and when the sliding direction is horizontal sliding to the right, determining that the second element positioned at the left of the element is the second element to be displayed.
Optionally, in the method according to the present invention, the step of setting the determined display height or display width of the second element based on the sliding distance further includes: if the sliding direction is the vertical direction, setting the display height; if the sliding direction is the horizontal direction, setting the display width; wherein the display height or the display width of the second element is determined according to the following formula,
y＝|y2-y1|/k，
where y denotes a display height or a display width, y2 denotes a value of a touch slide event, y1 denotes a value of a touch start event, and k denotes a distance coefficient.
According to another aspect of the present invention, there is provided a computing device comprising: one or more processors; and a memory; one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods described above.
According to a further aspect of the invention there is provided a computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a computing device, cause the computing device to perform any of the methods described above.
According to the scheme of the invention, the rebound effect of the page is realized on the default scrolling function of the browser, and the method has the advantages that: less configuration items are needed, and maintenance work is greatly reduced; based on the default scrolling function of the browser, the performance and compatibility can be ensured; the uniform rebound effect can be realized on all platforms; the code is few, the file volume is small, and the downloading speed is high.
Drawings
To the accomplishment of the foregoing and related ends, certain illustrative aspects are described herein in connection with the following description and the annexed drawings, which are indicative of various ways in which the principles disclosed herein may be practiced, and all aspects and equivalents thereof are intended to be within the scope of the claimed subject matter. The above and other objects, features and advantages of the present disclosure will become more apparent from the following detailed description read in conjunction with the accompanying drawings. Throughout this disclosure, like reference numerals generally refer to like parts or elements.
FIG. 1 shows a schematic diagram of a configuration of a computing device 100 according to one embodiment of the invention;
FIG. 2 illustrates a flow diagram of a page processing method 200 according to one embodiment of the invention;
3A-3D illustrate schematic views of page display effects according to one embodiment of the invention;
fig. 4A-4D are diagrams illustrating page display effects according to another embodiment of the present invention.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
According to the embodiment of the invention, a new page processing scheme is provided, so that the rolling rebound effect of the Web page is realized based on the default rolling function of the browser. Generally, the rolling bounce effect of a Web page is divided into two categories: pull down flush and pull up load. The two display effects are briefly described below by taking a scene in which a page is vertically scrolled as an example.
And the pull-down refreshing refers to the action of continuously dragging the page after the page is dragged to the top, and releasing the page after the dragging distance reaches a certain threshold value. Pull-down refresh is generally used to refresh the content in a page, and is mostly used in various information, e-commerce lists or home pages.
And the pull-up loading refers to the action of continuously dragging the page after the page is dragged to the bottom, and loosening the page after the dragging distance of the page reaches a certain threshold value. The pull-up loading is generally used for adding new content from the bottom of a page to the page, and is mostly used for various information types, e-commerce type lists or home pages.
The page processing scheme according to the embodiment of the invention is suitable for being executed in a computing device.
FIG. 1 shows a block diagram of a computing device 100, according to one embodiment of the invention.
In a basic configuration 102, computing device 100 typically includes system memory 106 and one or more processors 104. A memory bus 108 may be used for communication between the processor 104 and the system memory 106.
Depending on the desired configuration, the processor 104 may be any type of processing, including but not limited to: a microprocessor (μ P), a microcontroller (μ C), a Digital Signal Processor (DSP), or any combination thereof. The processor 104 may include one or more levels of cache, such as a level one cache 110 and a level two cache 112, a processor core 114, and registers 116. The example processor core 114 may include an Arithmetic Logic Unit (ALU), a Floating Point Unit (FPU), a digital signal processing core (DSP core), or any combination thereof. The example memory controller 118 may be used with the processor 104, or in some implementations the memory controller 118 may be an internal part of the processor 104.
Depending on the desired configuration, system memory 106 may be any type of memory, including but not limited to: volatile memory (such as RAM), non-volatile memory (such as ROM, flash memory, etc.), or any combination thereof. System memory 106 may include an operating system 120, one or more applications 122, and program data 124. In some implementations, the application 122 can be arranged to execute instructions on the operating system 120 by one or more processors 104 using program data 124. The application 122 may be, for example, a browser, an instant messaging application, an album, and the like.
Computing device 100 may also include an interface bus 140 that facilitates communication from various interface devices (e.g., output devices 142, peripheral interfaces 144, and communication devices 146) to the basic configuration 102 via the bus/interface controller 130. The example output device 142 includes a graphics processing unit 148 and an audio processing unit 150. They may be configured to facilitate communication with various external devices, such as a display or speakers, via one or more a/V ports 152. Example peripheral interfaces 144 may include a serial interface controller 154 and a parallel interface controller 156, which may be configured to facilitate communication with external devices such as input devices (e.g., keyboard, mouse, pen, voice input device, touch input device) or other peripherals (e.g., printer, scanner, etc.) via one or more I/O ports 158. An example communication device 146 may include a network controller 160, which may be arranged to facilitate communications with one or more other computing devices 162 over a network communication link via one or more communication ports 164.
A network communication link may be one example of a communication medium. Communication media may typically be embodied by computer readable instructions, data structures, program modules, and may include any information delivery media, such as carrier waves or other transport mechanisms, in a modulated data signal. A "modulated data signal" may be a signal that has one or more of its data set or its changes made in such a manner as to encode information in the signal. By way of non-limiting example, communication media may include wired media such as a wired network or private-wired network, and various wireless media such as acoustic, Radio Frequency (RF), microwave, Infrared (IR), or other wireless media. The term computer readable media as used herein may include both storage media and communication media.
Computing device 100 may be implemented as a personal computer including desktop and notebook computer configurations, as well as a server, such as a file server, database server, application server, WEB server, and the like. Of course, computing device 100 may also be implemented as part of a small-form factor portable (or mobile) electronic device such as a cellular telephone, a Personal Digital Assistant (PDA), a personal media player device, a wireless web-watch device, a personal headset device, an application specific device, or a hybrid device that include any of the above functions.
In an implementation according to the invention, the computing device 100 is configured to perform a page processing method according to the invention. Among other things, one or more applications 122 of computing device 100 include a plurality of program instructions for performing page processing method 200 in accordance with the present invention.
FIG. 2 shows a flowchart of a page processing method 200 according to one embodiment of the invention. As shown in fig. 2, the method 200 begins at step S210.
In step S210, a first element to be processed arranged on the page is marked so that the first element can be found by Javascript in the page. Typically, the first element is a display element at the top or bottom of the page. Of course, in some scenarios where the page is scrolling horizontally, the first element is the display element at the far left or far right of the page. The embodiments of the present invention are not limited thereto.
Subsequently, in step S220, at least one second element adjacent to the first element is inserted according to the display effect.
As described above, the display effect may be divided into a bounce display in a vertical direction and a bounce display in a horizontal direction according to a dragging direction of the page by the user. If the display effect is a springback display in the vertical direction, two second elements adjacent to the first element in the vertical direction are inserted, that is, one second element is inserted above and below the first element. If the display effect is a springback display in the horizontal direction, two second elements adjacent to the first element in the horizontal direction are inserted, that is, one second element is inserted on each of the left and right sides of the first element.
Subsequently, in step S230, in response to the sliding touch operation of the first element by the user, the value of the touch event is determined.
According to the embodiment of the present invention, before performing step S230, a sliding touch event is set for the first element.
The touch event includes a touch start event (denoted as touchstart), a touch slide event (denoted as touchmove), and a touch end event (denoted as touchend). Wherein touchstart indicates that a user is detected to start touching (optionally, the user may perform a touch operation on a screen of the computing device 100 by using a finger, a touch pen, or the like, which is not limited by the embodiment of the present invention), and the touchstart is triggered only once just after the user touches, and the starting position of the touch can be recorded by using the touchstart. touchmove indicates that it is detected that the user is sliding on the page, and this event is triggered multiple times during the touch process, with which real-time coordinates of the sliding on the page can be obtained. touchend indicates that the end of the user's touch operation is detected, and is triggered only once at the end of the touch, by which the display height of the second element can be set to 0 for restoring a page that has left the original position.
Based on this, in an embodiment according to the present invention, determining the value of a touch event may be performed in 3 steps.
(1) When a user starts to touch a first element, a touch starting position is recorded as the value of a touch starting event in response to the touch operation of the user on the first element.
(2) And recording the sliding position in real time as the value of the touch sliding event in the sliding process of the first element by the user.
(3) When the user stops the touch operation on the first element, the value of the touch end event is set. Typically, the value of the touch end event is set to 0.
Subsequently, in step S240, a display value of the second element is determined according to the set value of the touch event.
Typically, the display value of the second element is a value of a display width or a value of a display height. If the display effect is rebound display in the vertical direction, setting a display height value; if the display effect is a springback display in the horizontal direction, the value of the display width is set.
In one embodiment, the display value of the second element is determined in 4 steps.
In the first step, a sliding distance and a sliding direction are determined based on the value of the touch start event and the value of the touch slide event.
If it is noted that y2 is the value of the touch slide event and y1 is the value of the touch start event, then the slide distance is d-y 2-y 1. The sliding direction can be determined according to the positive and negative of d. In one embodiment, when d is greater than 0, the sliding direction is determined to be a vertical downward sliding or a horizontal rightward sliding; when d is less than 0, the sliding direction is determined to be vertical upward sliding or horizontal leftward sliding.
And secondly, determining a second element to be displayed based on the sliding direction.
In one embodiment according to the present invention, when the sliding direction is vertically upward sliding, the second element located below the first element is determined as the second element to be displayed. And when the sliding direction is vertical downward sliding, determining that the second element positioned above the first element is the second element to be displayed. And when the sliding direction is horizontal leftward sliding, determining that the second element positioned at the right side of the first element is the second element to be displayed. And when the sliding direction is horizontal sliding to the right, determining that the second element positioned at the left of the first element is the second element to be displayed.
And thirdly, setting the determined display height or display width of the second element based on the sliding distance.
Based on the above, if the sliding direction is the vertical direction, setting the display height of the second element; and if the sliding direction is the horizontal direction, setting the display width of the second element.
In one embodiment, the display height or display width of the second element is determined according to the following formula:
y＝|y2-y1|/k，
where y denotes a display height or a display width, y2 denotes a value of a touch slide event, y1 denotes a value of a touch start event, and k denotes a distance coefficient. Typically k has a value of 1. In some implementations, when k is 1, the sliding distance is directly set to the display height of the second element, which may cause the second element to be displayed too high, and thus the sliding distance may not be displayed as it is. The value of k may be set according to actual conditions in practical applications, and the embodiment of the present invention does not limit this.
And fourthly, setting the display height or the display width of the second element again based on the value of the touch end event. Typically, the value of the touch end event is set to 0. That is, when the sliding touch is finished, the page that has left the original position is restored. Therefore, the display height or the display width of the second element is set to 0 here.
In other embodiments, a sliding property of the second element may be set for smooth scrolling of the page. For example, the second element is set to change from the current display height or display width to 0 at a certain speed, which is not limited by the embodiment of the present invention.
The following shows an example of code for setting a first element and a second element and setting a sliding touch event of the first element according to one embodiment of the present invention. Wherein, the scroller represents a first element, and touchstart, touchmove and touchend respectively represent a sliding touch event.
According to the embodiment of the invention, in each sliding touch event, along with the calculated display value of the second element, the display effect of the page can be generated based on the display value.
3A-3D illustrate schematic views of page display effects according to one embodiment of the invention. 3A-3D illustrate the display effect of a page in a "drop-down refresh" scenario. Fig. 3A shows an initial state of page display immediately after the touch slide operation is detected, and fig. 3B and 3C show a display state of a page during a pull-down process, in which a height of a displayed second element is indicated by a slash "/" filled in. FIG. 3D shows that at the end of the touch swipe operation, the page returns to the initial state. As is clear from fig. 3A to 3D, as the distance of the pull-down slide increases, the display height of the second element also increases in synchronization. At this time, the display width of the second element is the width of the parent element, i.e., the display width of the page.
Fig. 4A-4D are diagrams illustrating page display effects according to another embodiment of the present invention. 4A-4D illustrate the display effect of a page in a "pull-up load" scenario. Fig. 4A shows an initial state of page display immediately after the touch slide operation is detected, and fig. 4B and 4C show a display state of a page during pull-up, in which a height of a displayed second element is indicated by a slash "/" filled in. FIG. 4D shows that at the end of the touch swipe operation, the page returns to the initial state. From left to right it is clear that as the distance of the pull-up slide increases, the display height of the second element also increases in synchrony. At this time, the display width of the second element is the width of the parent element, i.e., the display width of the page.
Based on the above description, it should be understood by those skilled in the art that when the page supports sliding touch in the horizontal direction, as the distance of sliding to the left increases or the distance of sliding to the right increases, the display width of the second element also increases, and when the touch sliding operation is finished, the display width of the second element is 0, and the page returns to the initial state, which is not described in detail herein.
According to the page processing scheme provided by the invention, the rebound effect of the page is realized on the default scrolling function of the browser, and the page processing scheme has the advantages that: less configuration items are needed, and maintenance work is greatly reduced; based on the default scrolling function of the browser, the performance and compatibility can be ensured; the uniform rebound effect can be realized on all platforms; the code is few, the file volume is small, and the downloading speed is high.
It should be appreciated that in the foregoing description of exemplary embodiments of the invention, various features of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: that the invention as claimed requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this invention.
Those skilled in the art will appreciate that the modules or units or components of the devices in the examples disclosed herein may be arranged in a device as described in this embodiment or alternatively may be located in one or more devices different from the devices in this example. The modules in the foregoing examples may be combined into one module or may be further divided into multiple sub-modules.
Those skilled in the art will appreciate that the modules in the device in an embodiment may be adaptively changed and disposed in one or more devices different from the embodiment. The modules or units or components of the embodiments may be combined into one module or unit or component, and furthermore they may be divided into a plurality of sub-modules or sub-units or sub-components. All of the features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or elements of any method or apparatus so disclosed, may be combined in any combination, except combinations where at least some of such features and/or processes or elements are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features included in other embodiments, rather than other features, combinations of features of different embodiments are meant to be within the scope of the invention and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.
The various techniques described herein may be implemented in connection with hardware or software or, alternatively, with a combination of both. Thus, the methods and apparatus of the present invention, or certain aspects or portions thereof, may take the form of program code (i.e., instructions) embodied in tangible media, such as floppy diskettes, CD-ROMs, hard drives, or any other machine-readable storage medium, wherein, when the program is loaded into and executed by a machine, such as a computer, the machine becomes an apparatus for practicing the invention.
In the case of program code execution on programmable computers, the computing device will generally include a processor, a storage medium readable by the processor (including volatile and non-volatile memory and/or storage elements), at least one input device, and at least one output device. Wherein the memory is configured to store program code; the processor is configured to perform the method of the present invention according to instructions in the program code stored in the memory.
By way of example, and not limitation, computer readable media may comprise computer storage media and communication media. Computer-readable media includes both computer storage media and communication media. Computer storage media store information such as computer readable instructions, data structures, program modules or other data. Communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. Combinations of any of the above are also included within the scope of computer readable media.
Furthermore, some of the described embodiments are described herein as a method or combination of method elements that can be performed by a processor of a computer system or by other means of performing the described functions. A processor having the necessary instructions for carrying out the method or method elements thus forms a means for carrying out the method or method elements. Further, the elements of the apparatus embodiments described herein are examples of the following apparatus: the apparatus is used to implement the functions performed by the elements for the purpose of carrying out the invention.
As used herein, unless otherwise specified the use of the ordinal adjectives "first", "second", "third", etc., to describe a common object, merely indicate that different instances of like objects are being referred to, and are not intended to imply that the objects so described must be in a given sequence, either temporally, spatially, in ranking, or in any other manner.
While the invention has been described with respect to a limited number of embodiments, those skilled in the art, having benefit of this description, will appreciate that other embodiments can be devised which do not depart from the scope of the invention as described herein. Furthermore, it should be noted that the language used in the specification has been principally selected for readability and instructional purposes, and may not have been selected to delineate or circumscribe the inventive subject matter. Accordingly, many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the appended claims. The present invention has been disclosed in an illustrative rather than a restrictive sense, and the scope of the present invention is defined by the appended claims.
Claims (9)
1. A page processing method, the method being adapted to be executed in a computing device having a browser with a scrolling function, and comprising the steps of:
marking a first element to be processed arranged on a page;
inserting at least one second element adjacent to the first element according to a display effect;
determining a value of a touch event in response to a sliding touch operation of the first element by a user;
determining a display value of a second element according to the value of the touch event, wherein the display value of the second element is a display height value or a display width value;
and generating a vertically resilient display effect or a horizontally resilient display effect of the page using a scrolling function of the browser itself based on the display value of the second element.
2. The method of claim 1, wherein the step of inserting at least one second element adjacent to the first element according to the display effect comprises:
if the display effect is rebound display in the vertical direction, inserting two second elements adjacent to the first element in the vertical direction;
and if the display effect is rebound display in the horizontal direction, inserting two second elements adjacent to the first element in the horizontal direction.
3. The method of claim 1 or 2, wherein, prior to the step of determining the value of the touch event in response to a sliding touch operation of the first element by the user, further comprising the steps of:
setting a sliding touch event for the first element,
wherein the sliding touch event comprises a touch start event, a touch slide event and a touch end event.
4. The method of claim 3, wherein the step of determining a value of a touch event in response to a sliding touch operation of the first element by a user comprises:
recording a touch starting position as a value of a touch starting event in response to a touch operation of a user on the first element;
recording a sliding position in real time as a value of a touch sliding event in the sliding process of the first element by the user;
and when the user stops the touch operation on the first element, setting the value of the touch end event.
5. The method of claim 4, wherein the determining a display value of a second element based on the value of the touch event comprises:
determining a sliding distance and a sliding direction based on the value of the touch start event and the value of the touch sliding event;
determining a second element to be displayed based on the sliding direction;
setting the determined display height or display width of the second element based on the sliding distance; and
the display height or the display width of the second element is set again based on the value of the touch end event.
6. The method of claim 5, wherein the determining a second element to display based on the sliding direction further comprises:
when the sliding direction is vertical upward sliding, determining a second element positioned below the first element as a second element to be displayed;
when the sliding direction is vertical downward sliding, determining that a second element positioned above the first element is a second element to be displayed;
when the sliding direction is horizontal leftward sliding, determining that a second element positioned at the right side of the first element is a second element to be displayed;
and when the sliding direction is horizontal rightward sliding, determining that the second element positioned at the left of the first element is the second element to be displayed.
7. The method of claim 6, wherein the setting the determined display height or display width of the second element based on the sliding distance further comprises:
if the sliding direction is the vertical direction, setting the display height;
if the sliding direction is the horizontal direction, setting the display width;
wherein the display height or the display width of the second element is determined according to the following formula,
y＝|y2-y1|/k，
where y denotes a display height or a display width, y2 denotes a value of a touch slide event, y1 denotes a value of a touch start event, and k denotes a distance coefficient.
8. A computing device, comprising:
one or more processors; and
a memory;
one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs comprising instructions for performing any of the methods of claims 1-7.
9. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a computing device, cause the computing device to perform any of the methods of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911249030.5A CN111061415B (en) | 2019-12-09 | 2019-12-09 | Page processing method and computing device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911249030.5A CN111061415B (en) | 2019-12-09 | 2019-12-09 | Page processing method and computing device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111061415A CN111061415A (en) | 2020-04-24 |
| CN111061415B true CN111061415B (en) | 2021-07-09 |
Family
ID=70300022
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911249030.5A Active CN111061415B (en) | 2019-12-09 | 2019-12-09 | Page processing method and computing device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111061415B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111782122B (en) * | 2020-05-21 | 2021-09-10 | 北京达佳互联信息技术有限公司 | Method, device, terminal and storage medium for responding to user operation |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104216620A (en) * | 2013-05-31 | 2014-12-17 | 腾讯科技（深圳）有限公司 | Method and device for controlling switching of list view content |
| CN105718451A (en) * | 2014-12-01 | 2016-06-29 | 上海斐讯数据通信技术有限公司 | Method for sharing pop-up modules by plurality of pages of browser |
| CN106598610A (en) * | 2016-12-19 | 2017-04-26 | 北京小米移动软件有限公司 | Refreshing implementation method and device based on webpage application |
| WO2018131887A1 (en) * | 2017-01-11 | 2018-07-19 | Samsung Electronics Co., Ltd. | Method and electronic device for managing data items |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7797643B1 (en) * | 2004-06-25 | 2010-09-14 | Apple Inc. | Live content resizing |
| CN101901112A (en) * | 2010-08-10 | 2010-12-01 | 广东欧珀移动通信有限公司 | Control method by sliding list |
| CN105677224A (en) * | 2016-01-06 | 2016-06-15 | 广州市动景计算机科技有限公司 | Drop-down gesture processing method, device and equipment |
| CN106095283A (en) * | 2016-06-07 | 2016-11-09 | 深圳市航盛电子股份有限公司 | A kind of Android ListView resilient movement method |
-
2019
- 2019-12-09 CN CN201911249030.5A patent/CN111061415B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104216620A (en) * | 2013-05-31 | 2014-12-17 | 腾讯科技（深圳）有限公司 | Method and device for controlling switching of list view content |
| CN105718451A (en) * | 2014-12-01 | 2016-06-29 | 上海斐讯数据通信技术有限公司 | Method for sharing pop-up modules by plurality of pages of browser |
| CN106598610A (en) * | 2016-12-19 | 2017-04-26 | 北京小米移动软件有限公司 | Refreshing implementation method and device based on webpage application |
| WO2018131887A1 (en) * | 2017-01-11 | 2018-07-19 | Samsung Electronics Co., Ltd. | Method and electronic device for managing data items |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111061415A (en) | 2020-04-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR101970208B1 (en) | Using clamping to modify scrolling | |
| JP5854442B2 (en) | Handwriting input method to write multiple characters continuously | |
| US20110239110A1 (en) | Method and System for Selecting Content Using A Touchscreen | |
| US20190114043A1 (en) | Method, apparatus, and electronic device for displaying a page and storage medium | |
| KR102287948B1 (en) | Apparatus and method for processing animation | |
| CN104102418A (en) | Method and device for locating target position of input box in mobile terminal browser | |
| US8762840B1 (en) | Elastic canvas visual effects in user interface | |
| US20190095049A1 (en) | Window expansion method and associated electronic device | |
| CN107798717A (en) | Electronic brush writing method, device, computer equipment and storage medium | |
| US20170169599A1 (en) | Methods and electronic devices for displaying picture | |
| WO2022242379A1 (en) | Stroke-based rendering method and device, storage medium and terminal | |
| EP3043251A1 (en) | Method of displaying content and electronic device implementing same | |
| CN111061415B (en) | Page processing method and computing device | |
| WO2017101390A1 (en) | Picture display method and apparatus | |
| CN113849096B (en) | Desktop display method and device and computing equipment | |
| JP6395160B2 (en) | Document layout of electronic display | |
| CN108491152B (en) | Touch screen terminal control method, terminal and medium based on virtual cursor | |
| CN107391148B (en) | View element saving method and device, electronic equipment and computer storage medium | |
| US8698772B2 (en) | Visual object manipulation | |
| CN113625930B (en) | Data display method, computing device and readable storage medium | |
| CN113885993A (en) | System desktop split-screen display method, split-screen display control device and computing equipment | |
| CN110287437B (en) | Webpage screenshot method and device, storage medium and terminal | |
| JP5676199B2 (en) | Document image display control device, operation control method thereof, and operation control program thereof | |
| CN109739501A (en) | The method, apparatus and electronic equipment of streaming effect are realized in absolute fix layout | |
| CN113312130B (en) | Window display method and computing 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 |