Data processing method and device, electronic equipment and readable storage medium
By adding specific component configurations to the page description file, the issue of the universality of page spring effects across different framework clients was resolved, enabling the normal use of spring-free effects and nested window functionality when displaying long pages.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- AGRICULTURAL BANK OF CHINA
- Filing Date
- 2023-02-20
- Publication Date
- 2026-06-05
AI Technical Summary
In existing technologies, solutions for disabling page spring effects are limited by different framework clients, lacking universality and increasing development complexity.
By adding code to implement the first container component in the description file of the target page, and adding code to the first scroll component between its start and end tags, ensure that the size of the container component and scroll component is the same as the webview window, the positioning method is fixed positioning, the bounce configuration item of the scroll component is false, and add a second scroll component and container component for nested windows to support nesting functionality.
It enables the disabling of spring effects on pages in clients with different frameworks, providing a universal solution to ensure that there are no spring effects when pages are displayed in long formats, and that nested windows function normally.
Smart Images
Figure CN116049591B_ABST
Abstract
Description
Technical Field
[0001] This application belongs to the field of computer technology, and in particular relates to data processing methods, apparatus, electronic devices and readable storage media. Background Technology
[0002] Scroll bouncing (also known as the rubber band effect or elastic scrolling) is commonly seen in mobile applications. Specifically: When scrolling down a page, after the top of the page reaches the top of the webview window, the user can continue scrolling down a short distance. A blank area (usually displaying the webview's background color) appears between the top of the page and the top of the webview window. When the user releases their finger or touch control (such as a stylus), the top of the page returns to the top of the webview window. Similarly, when scrolling up a page, after the bottom of the page reaches the bottom of the webview window, the user can continue scrolling up a short distance. A blank area appears between the bottom of the page and the bottom of the webview window. When the user releases their finger or touch control, the bottom of the page returns to the bottom of the webview window.
[0003] In certain scenarios, it's necessary to disable spring effects on a webpage to maintain page integrity and avoid issues like scrolling malfunctions or a broken page layout. There are two ways to disable spring effects: first, the user of the electronic device can disable them; second, developers can disable them during front-end development. Disabling spring effects during front-end development is limited by the client's framework, requiring developers to provide separate methods for disabling spring effects for different client frameworks.
[0004] How to provide a universal solution for the spring effect of blocking pages is a problem that urgently needs to be solved by those skilled in the art. Summary of the Invention
[0005] In view of this, the purpose of this application is to provide a data processing method, a data processing device, an electronic device, and a readable storage medium that can implement a spring effect for blocking pages for clients with different frameworks.
[0006] To achieve the above objectives, this application provides the following technical solution:
[0007] In a first aspect, this application provides a data processing method applied to an electronic device, the data processing method comprising:
[0008] Create a description file for the target page;
[0009] If the height of the target page is greater than the height of the client's webview window, add code to the description file of the target page to implement the first container component. The size of the first container component is the same as the size of the webview window, and the positioning method of the first container is fixed positioning.
[0010] Add code to implement the first scroll component between the start tag and the end tag of the code that implements the first container component. The size of the first scroll component is the same as the size of the webview window, and the value of the bounce configuration item of the first scroll component is false.
[0011] Add the page code of the target page between the start and end tags contained in the code that implements the first scrolling component.
[0012] Optional, also includes:
[0013] If the target page contains nested windows, for each nested window, add code to implement a second scrolling component outside the code segment corresponding to the nested window, and add code to implement a second container component outside the code to implement the second scrolling component, wherein the nest-mode configuration item of the second scrolling component is set to native, and the width of the second container component is the same as the width of the webview window.
[0014] Optionally, the first scrolling component and the second scrolling component are cube-scroll components.
[0015] Secondly, this application provides a data processing apparatus for use in an electronic device, the data processing apparatus comprising:
[0016] The file creation module is used to create a description file for the target page;
[0017] The container component creation module is used to add code to the description file of the target document to implement a first container component when the height of the target page is greater than the height of the client's webview window. The size of the first container component is the same as the size of the webview window, and the positioning method of the first container is fixed positioning.
[0018] A scroll component creation module is used to add code for implementing a first scroll component between the start tag and the end tag contained in the code that implements the first container component. The size of the first scroll component is the same as the size of the webview window, and the value of the bounce configuration item of the first scroll component is false.
[0019] A page code processing module is used to add the page code of the target page between the start tag and the end tag contained in the code that implements the first scrolling component.
[0020] Optional, also includes:
[0021] The nested window processing module is used to, when the target page contains nested windows, add code to implement a second scrolling component outside the code segment corresponding to the nested window for each nested window, and add code to implement a second container component outside the code to implement the second scrolling component, wherein the nest-mode configuration item of the second scrolling component is set to native, and the width of the second container component is the same as the width of the webview window.
[0022] Thirdly, this application provides an electronic device, including a processor and a memory;
[0023] The memory is used to store programs;
[0024] The processor is used to execute the program and implement the steps of any of the data processing methods described above.
[0025] Fourthly, this application provides a readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the data processing methods described above.
[0026] Therefore, the beneficial effects of this application are as follows:
[0027] The data processing method disclosed in this application involves an electronic device creating a description file for a target page. If the height of the target page is greater than the height of the client's webview window, code implementing a first container component is added to the description file. Code implementing a first scrolling component is then added between the start and end tags of the code implementing the first container component. The dimensions of the first container component and the first scrolling component are the same as the dimensions of the client's webview window. The positioning method of the first container is fixed, and the bounce configuration item of the first scrolling component is set to false. Subsequently, the electronic device adds the page code of the target page between the start and end tags of the code implementing the first scrolling component. This data processing method improves the processing of description files for long pages (greater than the height of the client's webview window) so that the client can implement a spring effect to disable the page during the display of a long page. This spring effect can be implemented for clients with different frameworks, providing a universal solution for disabling the spring effect on pages. Attached Figure Description
[0028] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0029] Figure 1 This is a flowchart of a data processing method disclosed in this application;
[0030] Figure 2 A flowchart illustrating another data processing method disclosed in this application;
[0031] Figure 3 This is a schematic diagram of the structure of a data processing device disclosed in this application;
[0032] Figure 4 This is a structural diagram of an electronic device disclosed in this application. Detailed Implementation
[0033] This application provides a data processing method, a data processing apparatus, an electronic device, and a readable storage medium, capable of implementing a spring effect for blocked pages on clients with different frameworks. In other words, this application provides a universal solution for a spring effect on blocked pages.
[0034] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0035] See Figure 1 , Figure 1 This is a flowchart illustrating a data processing method disclosed in this application. The data processing method is executed by an electronic device, specifically an electronic device used by technicians for front-end page development. The data processing method includes:
[0036] S11: Create the description file for the target page.
[0037] In practice, the description file for the target page uses HTML (Hypertext Markup Language).
[0038] S12: If the height of the target page is greater than the height of the client's webview window, add code to the description file of the target page to implement the first container component.
[0039] The size of the first container component is the same as the size of the client's webview window, and the positioning method of the first container component is fixed positioning.
[0040] S13: Add the code that implements the first scroll component between the start and end tags of the code that implements the first container component.
[0041] The size of the first scrolling component is the same as the size of the client's webview window, and the value of the bounce configuration item of the first scrolling component is false.
[0042] S14: Add the target page's page code between the start and end tags contained in the code that implements the first scrolling component.
[0043] In this application, the page to be processed is referred to as the target page. It should be noted that if the height of the target page is less than or equal to the height of the client's webview window, the user will not perform any pull-up or pull-down operations on the target page during its display on the client, and no spring effect will appear. If the height of the target page is greater than the height of the webview window, a spring effect may appear during the scrolling of the target page as the user performs pull-up or pull-down operations during its display on the client.
[0044] When developers are developing a page, if the height of the page (i.e., the target page) is greater than the height of the client's webview window, the electronic device is triggered to add code implementing the first container component to the target page's description file. It should be noted that before executing step S12, the target page's description file is empty; that is, a blank file is created for the target page in step S11.
[0045] As an example, the code for the first container component is as follows:
[0046] <div style＝"width:100％；height:100％；position:fixed；left:0；top:0；">
[0047]
[0048] As you can see, setting the width and height configuration items of the first container component to 100% makes the size of the first container component the same as the client's webview window.
[0049] In one implementation, a technician pre-writes code implementing the first container component and stores the code in a storage medium accessible to the electronic device. When the height of the target page is greater than the height of the client's webview window, the electronic device retrieves the code implementing the first container component from the aforementioned storage medium and writes the code into a description file of the target file.
[0050] In another implementation, the electronic device receives code input by a technician to implement the first container component and writes the code to implement the first container component into the description file of the object file.
[0051] In one implementation, a technician pre-writes the code implementing the first scrolling component and stores the code in a storage medium accessible to the electronic device. After the electronic device writes the code implementing the first container component into the description file of the object file, it obtains the code implementing the first scrolling component from the aforementioned storage medium and adds the code implementing the first scrolling component between the start and end tags contained in the code implementing the first container component.
[0052] In another implementation, the electronic device receives code input by a technician to implement the first scrolling component, and adds the code to implement the first scrolling component between the start and end tags contained in the code to implement the first container component.
[0053] In implementation, the first scrolling component can be the cube-scroll component. The cube-scroll component is a component in the Cube component library used to implement scrolling, supporting operations such as pull-to-load and pull-to-refresh. Of course, the first scrolling component can also be a scrolling component from other component libraries.
[0054] As an example, the code for the first scrolling component is as follows:
[0055] <cube-scroll ref="contentScroll";options="{bounce:false}">
[0056]
[0057] Based on the examples above regarding the code for implementing the first container component and the code for implementing the first scroll component, after adding the code for implementing the first scroll component between the start and end tags of the code for implementing the first container component, the following code is formed:
[0058]
[0059] Then, the electronic device adds the page code of the target page between the start and end tags contained in the code that implements the first scrolling component.
[0060] Based on the examples above regarding the code for implementing the first container component and the code for implementing the first scrolling component, after executing step S14, the description file of the target page contains the following code:
[0061]
[0062] In the code above, "......" represents the page code of the target page.
[0063] This section explains the page code of the target page. The page code of the target page includes: declaration, header, and body. The code located between the `<head>` and `<body>` tags is the header. The header defines the page's metadata, such as the page title, introduction, and description. The header itself is not displayed as content, but it affects the page's display. The code located between the `<body>` and `<input>` tags is the body, which contains the page content. Furthermore, both the header and body can contain multiple levels of nested tags.
[0064] The target page's page code is provided by a technician, and the electronic device adds this page code between the start and end tags of the code implementing the first scrolling component. For example, the technician writes the page code based on the target page's layout and content, or the technician obtains the target page's page code using existing webpage generation tools.
[0065] After executing step S14, the description file of the target page contains the page code of the target page. Outside the page code, code implementing the first scrolling component is added. Outside the code implementing the first scrolling component, code implementing the first container component is added. The size of the first container component and the first scrolling component is the same as the size of the client's webview window. The positioning method of the first container is fixed positioning, and the value of the bounce configuration item of the first scrolling component is false. The client obtains the description file of the target page, generates the target page based on the description file, and displays it. For the client, the page code of the target page is nested within the first scrolling component, which ensures that the target page can scroll within the first scrolling component. The first scrolling component is nested within the first container component (the positioning method of the first container component is fixed positioning), which ensures that the outer layer of the target page cannot scroll, thus disabling the spring effect of the target page. More importantly, this solution adjusts the description file of long pages (greater than the height of the client's webview window) to enable the client to disable the spring effect of the page. Regardless of the framework used by the client, when it receives the description file of the page generated based on the data processing method disclosed in this application, it can disable the spring effect of the page. In other words, this application provides a universal solution for a spring effect that blocks web pages.
[0066] The data processing method disclosed in this application involves an electronic device creating a description file for a target page. If the height of the target page is greater than the height of the client's webview window, code implementing a first container component is added to the description file. Code implementing a first scrolling component is then added between the start and end tags of the code implementing the first container component. The dimensions of the first container component and the first scrolling component are the same as the dimensions of the client's webview window. The positioning method of the first container is fixed, and the bounce configuration item of the first scrolling component is set to false. Subsequently, the electronic device adds the page code of the target page between the start and end tags of the code implementing the first scrolling component. This data processing method improves the processing of description files for long pages (greater than the height of the client's webview window) so that the client can implement a spring effect to disable the page during the display of a long page. This spring effect can be implemented for clients with different frameworks, providing a universal solution for disabling the spring effect on pages.
[0067] Considering that the target page may contain nested windows, in order to ensure that the click, pull-to-update, and pull-to-load functions of the nested windows on the target page can be used normally, this application... Figure 1 Based on the data processing method shown, further technical improvements will be made.
[0068] See Figure 2 , Figure 2 This is a flowchart of another data processing method disclosed in this application. The method is executed by an electronic device, specifically an electronic device used by a technician for front-end page development. The data processing method includes:
[0069] S11: Create the description file for the target page.
[0070] S12: If the height of the target page is greater than the height of the client's webview window, add code to the description file of the target page to implement the first container component.
[0071] The size of the first container component is the same as the size of the client's webview window, and the positioning method of the first container component is fixed positioning.
[0072] S13: Add the code that implements the first scroll component between the start and end tags of the code that implements the first container component.
[0073] The size of the first scrolling component is the same as the size of the client's webview window, and the value of the bounce configuration item of the first scrolling component is false.
[0074] S14: Add the target page's page code between the start and end tags contained in the code implementing the first scrolling component. The current description file is used to send to the client so that the client can display the target page based on the received description file.
[0075] S15: If the target page contains nested windows, for each nested window, add code to implement the second scrolling component outside the code segment corresponding to the nested window, and add code to implement the second container component outside the code to implement the second scrolling component.
[0076] In this case, the nest-mode configuration item of the second scrolling component is set to native, and the width of the second container component is the same as the width of the webview window.
[0077] In practice, the second scrolling component can be the cube-scroll component.
[0078] Setting the nest-mode configuration item of the second scrolling component to native makes the scrolling behavior of the second scrolling component the same as the browser's native nested scene on the client side. The nested window located in the second scrolling component can perform operations such as clicking, pull-down to update, and pull-up to load.
[0079] The following example illustrates step S15.
[0080] Assume the target page contains two nested windows. The code segment corresponding to the first nested window is denoted as B1, and the code segment corresponding to the second nested window is denoted as B2. The code in the target page's page code that precedes code segment B1 is denoted as A1, and the code in the target page's page code that lies between code segment B1 and code segment B2 is denoted as A2.
[0081] Based on the above examples of the code implementing the first container component and the code implementing the first scrolling component, after executing step S15, the description file of the target page contains the following code:
[0082]
[0083] In one implementation, the technician inputs instruction information for the code segment corresponding to the nested window. For example, the technician inputs the start and end line numbers of the code segment corresponding to each nested window in the target page.
[0084] This application Figure 2 The data processing method shown involves adding code to implement a second scrolling component outside the code segment corresponding to each nested window when the target page contains nested windows. Then, code to implement a second container component is added outside the code segment implementing the second scrolling component. The nest-mode configuration item of the second scrolling component is set to native, and the width of the second container component is the same as the width of the webview window. This allows users to perform operations such as clicking, pull-down updating, and pull-up loading within the nested windows of the target page.
[0085] The present application discloses a data processing method, and correspondingly, the present application also discloses a data processing apparatus for implementing the data processing method. The descriptions of the two in the specification can be referenced to each other.
[0086] See Figure 3 , Figure 3 This is a schematic diagram of the structure of a data processing device disclosed in this application. The data processing device includes a file creation module 101, a container component creation module 102, a scrolling component creation module 103, and a page code processing module 104.
[0087] in:
[0088] File creation module 101 is used to create a description file for the target page.
[0089] The container component creation module 102 is used to add code implementing the first container component to the description file of the target document when the height of the target page is greater than the height of the client's webview window. The size of the first container component is the same as the size of the webview window, and the positioning method of the first container is fixed positioning.
[0090] The scroll component creation module 103 is used to add code implementing the first scroll component between the start and end tags contained in the code implementing the first container component. The size of the first scroll component is the same as the size of the webview window, and the value of the bounce configuration item of the first scroll component is false.
[0091] The page code processing module 104 is used to add the page code of the target page between the start tag and the end tag contained in the code that implements the first scrolling component. The current description file is used to send to the client so that the client can display the target page based on the description file.
[0092] Optional, in Figure 3 Based on the data processing device shown, a nested window processing module is further added.
[0093] The nested window handling module is used to: when the target page contains nested windows, add code to implement a second scrolling component outside the code segment corresponding to each nested window, and add code to implement a second container component outside the code implementing the second scrolling component. The nest-mode configuration item for the second scrolling component is set to native, and the width of the second container component is the same as the width of the webview window.
[0094] This application also provides an electronic device.
[0095] See Figure 4 , Figure 4 The hardware structure of an electronic device is shown, which includes a processor 401, a memory 402, a communication interface 403, and a communication bus 404. The electronic device may also include an input unit 405 and a display 406.
[0096] In this embodiment, the number of processor 401, memory 402, communication interface 403, communication bus 404, input unit 405, and display 406 is at least one, and the processor 401, memory 402, communication interface 403, input unit 405, and display 406 communicate with each other through communication bus 404. Communication bus 404 can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into address bus, data bus, control bus, etc.
[0097] It should be noted that those skilled in the art will understand that Figure 4 The structure of the electronic device shown does not constitute a limitation on the electronic device; the electronic device may include, but is not limited to, other electronic devices. Figure 4 This may indicate more or fewer components, or combinations of certain components, or different component arrangements.
[0098] The following is combined Figure 4 A detailed introduction to each component of the electronic device is provided.
[0099] The processor 401 is the control center of the electronic device. It connects various parts of the electronic device through various interfaces and lines. By running or executing software programs and / or modules stored in the memory 402, and calling data stored in the memory 402, it performs various functions of the electronic device and processes data, thereby monitoring the electronic device as a whole.
[0100] The processor 401 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.
[0101] The memory 402 may include memory such as high-speed random-access memory (RAM) and read-only memory (ROM), and may also include mass storage devices such as at least one disk storage device.
[0102] The memory 402 stores a program, and the processor 401 can call the program stored in the memory. The program is used for:
[0103] Create a description file for the target page;
[0104] If the height of the target page is greater than the height of the client's webview window, add code to the description file of the target page to implement the first container component. The size of the first container component is the same as the size of the webview window, and the positioning method of the first container is fixed positioning.
[0105] Add code to implement the first scroll component between the start tag and the end tag of the code that implements the first container component. The size of the first scroll component is the same as the size of the webview window, and the value of the bounce configuration item of the first scroll component is false.
[0106] The page code of the target page is added between the start and end tags contained in the code that implements the first scrolling component. The current description file is used to send to the client so that the client can display the target page based on the description file.
[0107] Optionally, the refined and extended functions of the program can be found in the description above.
[0108] This application also provides a readable storage medium that can store a program suitable for execution by a processor, the program being used for:
[0109] Create a description file for the target page;
[0110] If the height of the target page is greater than the height of the client's webview window, add code to the description file of the target page to implement the first container component. The size of the first container component is the same as the size of the webview window, and the positioning method of the first container is fixed positioning.
[0111] Add code to implement the first scroll component between the start tag and the end tag of the code that implements the first container component. The size of the first scroll component is the same as the size of the webview window, and the value of the bounce configuration item of the first scroll component is false.
[0112] The page code of the target page is added between the start and end tags contained in the code that implements the first scrolling component. The current description file is used to send to the client so that the client can display the target page based on the description file.
[0113] Optionally, the refined and extended functions of the program can be found in the description above.
[0114] It should also be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0115] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. The data processing apparatus, electronic device, and readable storage medium disclosed in the embodiments are described simply because they correspond to the data processing methods disclosed in the embodiments; relevant parts can be referred to the method section.
[0116] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A data processing method, characterized in that, The data processing method, applied to electronic devices, includes: Create a description file for the target page; If the height of the target page is greater than the height of the client's webview window, add code to the description file of the target page to implement the first container component. The size of the first container component is the same as the size of the webview window, and the positioning method of the first container is fixed positioning. Add code to implement the first scroll component between the start tag and the end tag of the code that implements the first container component. The size of the first scroll component is the same as the size of the webview window, and the value of the bounce configuration item of the first scroll component is false. Add the page code of the target page between the start tag and the end tag of the code that implements the first scrolling component; so that the page code of the target page is nested within the first scrolling component, ensuring that the target page scrolls within the first scrolling component, and the first scrolling component is nested within the first container component, ensuring that the outer layer of the target page cannot scroll, thereby disabling the spring effect of the target page.
2. The data processing method according to claim 1, characterized in that, Also includes: If the target page contains nested windows, for each nested window, add code to implement a second scrolling component outside the code segment corresponding to the nested window, and add code to implement a second container component outside the code to implement the second scrolling component, wherein the nest-mode configuration item of the second scrolling component is set to native, and the width of the second container component is the same as the width of the webview window.
3. The data processing method according to claim 2, characterized in that, The first scrolling component and the second scrolling component are cube-scroll components.
4. A data processing apparatus, characterized in that, The data processing device, applied to electronic devices, includes: The file creation module is used to create a description file for the target page; The container component creation module is used to add code to the description file of the target page to implement a first container component when the height of the target page is greater than the height of the client's webview window. The size of the first container component is the same as the size of the webview window, and the positioning method of the first container is fixed positioning. A scroll component creation module is used to add code for implementing a first scroll component between the start tag and the end tag contained in the code that implements the first container component. The size of the first scroll component is the same as the size of the webview window, and the value of the bounce configuration item of the first scroll component is false. The page code processing module is used to add the page code of the target page between the start tag and the end tag contained in the code implementing the first scrolling component; so that the page code of the target page is nested within the first scrolling component, ensuring that the target page scrolls within the first scrolling component, and the first scrolling component is nested within the first container component, ensuring that the outer layer of the target page cannot scroll, thereby disabling the spring effect of the target page.
5. The data processing apparatus according to claim 4, characterized in that, Also includes: The nested window processing module is used to, when the target page contains nested windows, add code to implement a second scrolling component outside the code segment corresponding to the nested window for each nested window, and add code to implement a second container component outside the code to implement the second scrolling component, wherein the nest-mode configuration item of the second scrolling component is set to native, and the width of the second container component is the same as the width of the webview window.
6. An electronic device, characterized in that, Including processor and memory; The memory is used to store programs; The processor is configured to execute the program to implement the steps of the method as described in any one of claims 1 to 3.
7. A readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method as described in any one of claims 1 to 3.