An interface scrolling method, device, equipment and storage medium

Abstract

Embodiments of the present application provide an interface scrolling method and device, equipment and storage medium, and relate to the technical field of computer, which comprises: obtaining a current position of a target node, determining a scrolling speed of the target node from the current position to a reference position based on a target distance between the reference position and the current position of the target node, and scrolling the target node to the reference position according to the scrolling speed. In the embodiments of the present application, the current position of the target node is obtained, and the scrolling speed is determined according to the target distance between the reference position and the current position of the target node, so that the interface can be scrolled to any node, and the user can browse the interface more flexibly and smoothly.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to an interface scrolling method, apparatus, device, and storage medium. Background Technology

[0002] For product development, user experience has always been a focus of research for developers. It is crucial to make the user's browsing experience more realistic.

[0003] Currently, when users browse the program interface of mobile applications, they cannot directly jump to a specific node, and the scrolling process of the program interface is not smooth enough. Summary of the Invention

[0004] This application provides an interface scrolling method, apparatus, device, and storage medium for direct node jumps and improving the smoothness of the program interface scrolling process.

[0005] On one hand, embodiments of this application provide an interface scrolling method, including:

[0006] Get the current position of the target node;

[0007] Based on the target distance between the preset reference position and the current position of the target node, the rolling speed of the target node from the current position to the reference position is determined;

[0008] The target node is scrolled to the reference position according to the stated scrolling speed.

[0009] In this embodiment, by obtaining the current position of the target node and determining the scrolling speed based on the target distance between the reference position and the current position of the target node, the interface can be scrolled to any node, making the user browsing the interface more flexible and smooth.

[0010] Optionally, obtaining the current position of the target node includes:

[0011] In response to a trigger operation on the triggering component, the current position of the target node is obtained, wherein the triggering component corresponds to the target node.

[0012] In this embodiment, the target node is triggered according to the triggering component, and the target node can be flexibly triggered as needed.

[0013] Optionally, determining the scrolling speed of the target node from its current position to the reference position based on the target distance between a preset reference position and the current position of the target node includes:

[0014] The absolute difference between the index of the reference node at the reference position and the index of the target node is taken as the target distance between the current position of the reference position and the target node.

[0015] Based on the target distance, determine the rolling speed of the target node from the current position to the reference position.

[0016] In this embodiment, the scrolling speed is determined by the reference position and the current position of the target node. The different speeds when the distance is close and when the distance is far can make the scrolling more flexible.

[0017] Optionally, the rolling speed includes an initial speed;

[0018] Determining the scrolling speed of the target node from its current position to the reference position based on the target distance includes:

[0019] If the target distance is greater than or equal to 3, then the adjustment multiplier is determined to be: target distance / 3 + 0.5;

[0020] If the target distance is less than 3, then the adjustment multiplier is determined to be 1.5;

[0021] If the target distance is greater than 1, then the initial velocity is determined to be 10. Adjust the multiplier;

[0022] If the target distance is less than or equal to 1, then the initial velocity is determined to be 10.

[0023] Optionally, scrolling the target node to the reference position according to the scrolling speed includes:

[0024] Roll the target node toward the reference position at the initial speed;

[0025] When the remaining distance between the target node and the reference position is less than a preset threshold, the node rolls to the reference position at a preset buffer speed.

[0026] In this embodiment, different scrolling speeds are used depending on the scrolling position. The speed decreases when approaching the target node, making the scrolling more lifelike and more flexible.

[0027] Optionally, the target node can be scrolled in two ways: horizontal scrolling and vertical scrolling.

[0028] Optionally, the distance between the target node and its neighboring nodes is pre-configured.

[0029] On one hand, embodiments of this application provide an interface scrolling device, the device comprising:

[0030] The acquisition module is used to obtain the current position of the target node;

[0031] The determination module is used to determine the rolling speed of the target node from the current position to the reference position based on the target distance between the preset reference position and the current position of the target node;

[0032] A scrolling module is used to scroll the target node to the reference position according to the scrolling speed.

[0033] Optionally, the acquisition module is specifically used for:

[0034] In response to a trigger operation on the triggering component, the current position of the target node is obtained, wherein the triggering component corresponds to the target node.

[0035] Optionally, the determining module is specifically used for:

[0036] The absolute difference between the index of the reference node at the reference position and the index of the target node is taken as the target distance between the current position of the reference position and the target node.

[0037] Based on the target distance, determine the rolling speed of the target node from the current position to the reference position.

[0038] Optionally, the determining module is specifically used for:

[0039] If the target distance is greater than or equal to 3, then the adjustment multiplier is determined to be: target distance / 3 + 0.5;

[0040] If the target distance is less than 3, then the adjustment multiplier is determined to be 1.5;

[0041] If the target distance is greater than 1, then the initial velocity is determined to be 10. Adjust the multiplier;

[0042] If the target distance is less than or equal to 1, then the initial velocity is determined to be 10.

[0043] Optionally, the scrolling module is specifically used for:

[0044] Roll the target node toward the reference position at the initial speed;

[0045] When the remaining distance between the target node and the reference position is less than a preset threshold, the node rolls to the reference position at a preset buffer speed.

[0046] Optionally, the target node can be scrolled in two ways: horizontal scrolling and vertical scrolling.

[0047] Optionally, the distance between the target node and its neighboring nodes is pre-configured.

[0048] In this embodiment, by obtaining the current position of the target node and determining the scrolling speed based on the target distance between the reference position and the current position of the target node, the interface can be scrolled to any node, making the user browsing the interface more flexible and smooth. Attached Figure Description

[0049] Figure 1 A system architecture diagram provided for an embodiment of this application;

[0050] Figure 2 A flowchart illustrating an interface scrolling method provided in this application embodiment. Figure 1 ;

[0051] Figure 3 A flowchart illustrating an interface scrolling method provided in this application embodiment. Figure 2 ;

[0052] Figure 4 This is a schematic diagram of the structure of a data processing device provided in an embodiment of this application;

[0053] Figure 5 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0054] To make the objectives, technical solutions, and beneficial effects of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0055] refer to Figure 1 This is a system architecture diagram applicable to the embodiments of this application. The system includes at least a terminal device 101 and a server 102.

[0056] Terminal device 101 is pre-installed with business applications, such as client applications, web applications, and mini-program applications. Terminal device 101 can be a smartphone, tablet, laptop, desktop computer, smart home appliance, smart voice interaction device, smart vehicle device, etc., but is not limited to these.

[0057] Server 102 is the backend server for business applications. Server 102 can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms.

[0058] Terminal device 101 and server 102 can be connected directly or indirectly through wired or wireless communication, and this application does not impose any restrictions.

[0059] based on Figure 1 The system architecture diagram in this application illustrates a method for interface scrolling, such as... Figure 2 As shown, the process of this method is executed by a computer device, which can be... Figure 1 The server 102 shown includes the following steps:

[0060] Step 201: Obtain the current position of the target node.

[0061] Specifically, in this embodiment, the data corresponding to the target node can be icons of various sections in a client application, web application, or mini-program application. For example, in a fresh produce client application, the icons of vegetables and fruits correspond to their respective nodes. For instance, the target node to be scrolled is the fruit icon. In some embodiments, the scrolling method of the target node includes horizontal scrolling and vertical scrolling.

[0062] In some embodiments, the spacing between the target node and its neighboring nodes is pre-configured.

[0063] Specifically, the nodes adjacent to the target node are called neighboring nodes, and the distance between two adjacent nodes can be pre-configured according to requirements.

[0064] In some embodiments, in response to a triggering operation on the triggering component, the current position of the target node is obtained, and the triggering component corresponds to the target node.

[0065] Specifically, the trigger component is used to trigger the scrolling of the target node. After the trigger component's operation, the current position of the target node can be obtained. The relationship between the trigger component and the node can be one-to-one or one-to-many.

[0066] For example, a trigger component can consist of multiple buttons. Triggering different buttons retrieves the corresponding nodes for each button; for instance, button 1 corresponds to the vegetable icon, and button 2 corresponds to the fruit icon. Alternatively, a trigger component can consist of a single button, with pre-defined nodes for that button as needed. For example, if only button 1 is used, its target node would be the vegetable icon.

[0067] In this embodiment, the target node is triggered according to the triggering component, and the target node can be flexibly triggered as needed.

[0068] Step 202: Based on the target distance between the preset reference position and the current position of the target node, determine the rolling speed of the target node from the current position to the reference position.

[0069] Specifically, the reference position is preset and can be set according to needs. The target node's current position is generally not at the reference position. To scroll the target node from its current position to the reference position, the distance between the reference position and the target node's current position must first be calculated. This distance allows us to calculate the scrolling speed from the target node's current position to the reference position. The reference position can be the center position of the current screen display. Scrolling from the target node to the reference position can be forward or backward.

[0070] For example, in a client application, if a vegetable icon is set as the target node and you want it to scroll towards the reference position, you first need to calculate the distance between the vegetable icon and the reference position, and then calculate the speed at which the vegetable icon will scroll towards the reference position based on the distance.

[0071] In some embodiments, the absolute difference between the index of the reference node at the reference position and the index of the target node is used as the target distance between the reference position and the current position of the target node. Based on the target distance, the scrolling speed of the target node from its current position to the reference position is determined.

[0072] Specifically, each node has its corresponding index. The index of the first node can be set to 0, the index of the second node to 1, and so on. The absolute difference between the index of the reference node at the base position and the index of the target node is used as the target distance between the base position and the current position of the target node. The rolling speed from the current position of the target node to the base position is determined based on the target distance.

[0073] For example, if the index of the reference node at the base position is 3 and the index of the target node is 1, then scrolling from the current position of the target node to the base position is forward scrolling, and the target distance between the base position and the current position of the target node is 2.

[0074] If the index of the reference node at the base position is 3 and the index of the target node is 5, then scrolling from the current position of the target node to the base position is called reverse scrolling, and the target distance between the base position and the current position of the target node is 2.

[0075] In this embodiment, the target node is triggered according to the triggering component, and the target node can be flexibly triggered as needed.

[0076] In some embodiments, the scrolling speed includes an initial speed, and determining the scrolling speed of the target node from its current position to a reference position based on the target distance includes:

[0077] If the target distance is greater than or equal to 3, then the adjustment multiplier is determined as target distance / 3 + 0.5;

[0078] If the target distance is less than 3, then set the adjustment multiplier to 1.5;

[0079] If the target distance is greater than 1, then the initial velocity is set to 10. Adjust the multiplier;

[0080] If the target distance is less than or equal to 1, then the initial velocity is set to 10.

[0081] Specifically, the adjustment ratio is first calculated, as shown in Formula 1:

[0082] …………Formula 1

[0083] in, m For the target distance, To adjust the multiplier.

[0084] Then, calculate the initial velocity based on the adjustment ratio, as shown in Formula 2:

[0085] …………Formula 2

[0086] in, This is the initial velocity.

[0087] In some embodiments, the target node is rolled toward the reference position at an initial speed. When the remaining distance between the target node and the reference position is less than a preset threshold, it is rolled to the reference position at a preset buffer speed.

[0088] Specifically, when scrolling from the target node to the reference position, different scrolling speeds can be set as needed. For example, after scrolling a certain distance at the initial speed, a deceleration design can be implemented when the target node is about to be reached, changing the speed to a buffer speed to continue scrolling to the reference position. The scrolling distance can be controlled by setting a preset threshold in advance.

[0089] For example, if there is a distance of 100 units between the current position of the vegetable icon and the reference position, when scrolling from the current position of the vegetable icon to the reference position, a preset threshold of 30 can be set, that is, the vegetable icon initially scrolls at the initial speed, and when there is still 30 units of distance from the reference position, the scrolling speed decreases from the initial speed to 6; or a preset threshold of 10 can be set, that is, the vegetable icon initially scrolls at the initial speed, and when there is still 10 units of distance from the reference position, the scrolling speed decreases from the initial speed to 1.

[0090] In this embodiment, different scrolling speeds are used depending on the scrolling position. The speed decreases when approaching the target node, making the scrolling more lifelike and more flexible.

[0091] Step 203: Scroll the target node to the reference position according to the scrolling speed.

[0092] Specifically, the target node can be scrolled to the reference position according to the calculated scrolling speed. Using a Bézier curve when scrolling the target node to the reference position during the scrolling process makes the node switching smoother.

[0093] To better explain the embodiments of this application, a flowchart of an interface scrolling method provided by the embodiments of this application is described below with reference to a specific implementation scenario, including the following steps, such as... Figure 3 As shown:

[0094] Step 301: Obtain the current position of the target node.

[0095] Step 302: Determine the distance between the reference position and the current position of the target node.

[0096] Step 303: Calculate the initial rolling speed based on the distance.

[0097] Step 304: Roll the target node toward the reference position according to the initial speed.

[0098] Step 305: When the remaining distance between the target node and the reference position is less than the preset threshold, adjust the initial speed to the buffer speed.

[0099] Step 306: Continue rolling to the reference position according to the buffer speed.

[0100] In this embodiment, by obtaining the current position of the target node and determining the scrolling speed based on the target distance between the reference position and the current position of the target node, the interface can be scrolled to any node, making the user browsing the interface more flexible and smooth.

[0101] Based on the same technical concept, embodiments of this application provide an interface scrolling device, such as... Figure 4 As shown, the device 400 includes:

[0102] The acquisition module 401 is used to acquire the current position of the target node;

[0103] The determining module 402 is used to determine the rolling speed of the target node from the current position to the reference position based on the target distance between the preset reference position and the current position of the target node;

[0104] The scrolling module 403 is used to scroll the target node to the reference position according to the scrolling speed.

[0105] Optionally, the acquisition module 401 is specifically used for:

[0106] In response to a trigger operation on the triggering component, the current position of the target node is obtained, wherein the triggering component corresponds to the target node.

[0107] Optionally, the determining module 402 is specifically used for:

[0108] The absolute difference between the index of the reference node at the reference position and the index of the target node is taken as the target distance between the current position of the reference position and the target node.

[0109] Based on the target distance, determine the rolling speed of the target node from the current position to the reference position.

[0110] Optionally, the determining module 402 is specifically used for:

[0111] If the target distance is greater than or equal to 3, then the adjustment multiplier is determined to be: target distance / 3 + 0.5;

[0112] If the target distance is less than 3, then the adjustment multiplier is determined to be 1.5;

[0113] If the target distance is greater than 1, then the initial velocity is determined to be 10. Adjust the multiplier;

[0114] If the target distance is less than or equal to 1, then the initial velocity is determined to be 10.

[0115] Optionally, the scrolling module 403 is specifically used for:

[0116] Roll the target node toward the reference position at the initial speed;

[0117] When the remaining distance between the target node and the reference position is less than a preset threshold, the node rolls to the reference position at a preset buffer speed.

[0118] Optionally, the target node can be scrolled in two ways: horizontal scrolling and vertical scrolling.

[0119] Optionally, the distance between the target node and its neighboring nodes is pre-configured.

[0120] Based on the same technical concept, embodiments of this application provide a computer device, which may be a terminal device or a local server, such as... Figure 5 As shown, it includes at least one processor 501 and a memory 502 connected to at least one processor. In this embodiment, the specific connection medium between the processor 501 and the memory 502 is not limited. Figure 5 Taking the connection between processor 501 and memory 502 via a bus as an example, the bus can be divided into address bus, data bus, control bus, etc.

[0121] In this embodiment of the application, the memory 502 stores instructions that can be executed by at least one processor 501. By executing the instructions stored in the memory 502, at least one processor 501 can perform the steps included in the above-described interface scrolling method.

[0122] The processor 501 is the control center of the computer device, capable of connecting to various parts of the computer device via various interfaces and lines. It performs data processing by running or executing instructions stored in the memory 502 and accessing data stored in the memory 502. Optionally, the processor 501 may include one or more processing units. The processor 501 may integrate an application processor and a modem processor. The application processor primarily handles the operating system, user interface, and applications, while the modem processor primarily handles wireless communication. It is understood that the modem processor may not be integrated into the processor 501. In some embodiments, the processor 501 and the memory 502 may be implemented on the same chip; in other embodiments, they may be implemented on separate chips.

[0123] Processor 501 can be a general-purpose processor, such as a central processing unit (CPU), digital signal processor, application-specific integrated circuit (ASIC), field-programmable gate array (FPGA), or other programmable logic device, discrete gate or transistor logic device, or discrete hardware component, capable of implementing or executing the methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this application can be directly manifested as being executed by a hardware processor, or executed by a combination of hardware and software modules within the processor.

[0124] Memory 502, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules. Memory 502 may include at least one type of storage medium, such as flash memory, hard disk, multimedia card, card-type memory, random access memory (RAM), static random access memory (SRAM), programmable read-only memory (PROM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), magnetic memory, magnetic disk, optical disk, etc. Memory 502 can be any other medium capable of carrying or storing desired program code in the form of instructions or data structures that can be accessed by a computer, but is not limited thereto. In the embodiments of this application, memory 502 can also be a circuit or any other device capable of implementing storage functions for storing program instructions and / or data.

[0125] Based on the same inventive concept, embodiments of this application provide a computer-readable storage medium storing a computer program executable by a computer device, which, when run on the computer device, causes the computer device to perform the steps of the above-described interface scrolling method.

[0126] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0127] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0128] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0129] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0130] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A method for scrolling an interface, characterized in that, include: Get the current position of the target node; The absolute difference between the index of the reference node at the reference position and the index of the target node is used as the target distance between the reference position and the current position of the target node. Based on the target distance, determine the rolling speed of the target node from the current position to the reference position; Roll the target node toward the reference position at the initial speed; When the remaining distance between the target node and the reference position is less than a preset threshold, the node rolls to the reference position at a preset buffer speed.

2. The method as described in claim 1, characterized in that, The step of obtaining the current position of the target node includes: In response to a trigger operation on the triggering component, the current position of the target node is obtained, wherein the triggering component corresponds to the target node.

3. The method as described in claim 2, characterized in that, The rolling speed includes the initial speed; Determining the scrolling speed of the target node from its current position to the reference position based on the target distance includes: If the target distance is greater than or equal to 3, then the adjustment multiplier is determined to be: target distance / 3 + 0.5; If the target distance is less than 3, then the adjustment multiplier is determined to be 1.5; If the target distance is greater than 1, then the initial velocity is determined to be 10. Adjust the multiplier; If the target distance is less than or equal to 1, then the initial velocity is determined to be 10.

4. The method as described in claim 1, characterized in that, The target node can be scrolled horizontally or vertically.

5. The method as described in claim 1, characterized in that, The distance between the target node and its neighboring nodes is pre-configured.

6. An interface scrolling device, characterized in that, include: The acquisition module is used to obtain the current position of the target node; The determination module is used to take the absolute difference between the index of the reference node located at the reference position and the index of the target node as the target distance between the reference position and the current position of the target node; Based on the target distance, determine the rolling speed of the target node from the current position to the reference position; A scrolling module is used to scroll the target node toward the reference position at an initial speed; When the remaining distance between the target node and the reference position is less than a preset threshold, the node rolls to the reference position at a preset buffer speed.

7. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the method according to any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that, It stores a computer program executable by a computer device, which, when run on the computer device, causes the computer device to perform the steps of the method according to any one of claims 1 to 5.

Images