An assembly rendering method, device, apparatus and storage medium

Abstract

This specification discloses a component rendering method, apparatus, device, and storage medium. The method includes: detecting the current scroll distance of a target scrolling view component; different floating components within the target scrolling view component corresponding to different effective floating ranges; the stacking order of each floating component and other components containing each floating component being higher than the same-level components within the corresponding effective floating range of each floating component; and, when the current scroll distance is detected to be within any effective floating range, moving the target floating component corresponding to that effective floating range to a preset fixed position on the current display interface for floating rendering. This method achieves a component floating display effect by moving components, increasing the freedom in setting the component floating display effect.

Description

Technical Field

[0001] The embodiments in this specification relate to the field of computer application technology, and in particular to a component rendering method, apparatus, device, and storage medium. Background Technology

[0002] In front-end design, there is a component floating interface display effect, which can fix a specified component in the same position on the display interface and prevent it from changing position as the interface is scrolled, thereby improving the front-end display effect.

[0003] For example, a component on the interface can be fixed at the top of the display screen and will not change position as the interface is scrolled up or down, achieving a sticky display effect; or a component on the interface can be fixed on the left side of the display screen and will not change position as the interface is scrolled left or right, achieving a side-sticking effect.

[0004] However, the technologies used to achieve the floating component display effect are often subject to many limitations, making it impossible to set only the floating display effect of the component, and the degree of freedom in setting the floating display effect of the component is low.

[0005] For example, the floating sticky display effect can usually only be set for the direct child views of the scroll view, which has low flexibility and a poor experience for developers. Summary of the Invention

[0006] To address the aforementioned problems, embodiments of this specification provide a component rendering method, apparatus, device, and storage medium. The technical solution is shown below.

[0007] A component rendering method, applied to a rendering front-end, includes:

[0008] Detect the current scroll distance of the target scroll view component;

[0009] Different floating components in the target scroll view component have different effective floating ranges; the stacking order of each floating component and other components containing each floating component is higher than the same-level components within the effective floating range of each floating component.

[0010] If the current scrolling distance is detected to be within any floating effective range, the target component to be floated corresponding to any floating effective range is moved to a preset fixed position on the current display interface for floating rendering display.

[0011] Optionally, the current scrolling distance includes the current vertical scrolling distance; the top of the target component to be suspended at the preset fixed position coincides with the top of the current display interface.

[0012] Optionally, the method further includes:

[0013] If the current rolling distance is detected to be greater than the maximum value of any of the effective floating ranges, the target component to be suspended corresponding to any of the effective floating ranges is fixed at a first preset position;

[0014] The distance between the top of the target component to be suspended at the first preset position and the top of the target scroll view component is the maximum value of any effective suspension range.

[0015] Optionally, the minimum value of the effective floating range is greater than or equal to the distance between the top of the initial position of the component to be suspended and the top of the target scrolling view component.

[0016] Optionally, the method for determining the effective suspension range includes:

[0017] Traverse each component to be floated in the target scroll view component from top to bottom, and perform the following steps;

[0018] The distance between the top of the initial position of the currently traversed floating component and the top of the target scroll view component is determined as the minimum value of the effective floating range corresponding to the currently traversed floating component.

[0019] If the currently traversed floating component is not the last floating component, determine the distance between the top of the initial position of the next floating component and the top of the target scroll view component, and then determine the maximum value of the corresponding floating effective range as the difference between the determined distance and the height of the currently traversed floating component.

[0020] If the currently traversed component to be floated is the last component to be floated, the difference between the height of the target scroll view component and the height of the currently traversed component to be floated is determined as the maximum value of the corresponding effective floating range.

[0021] Optionally, the method for setting the stacking order of components in the target scrolling view component includes:

[0022] For each sibling component in the target scroll view component, set the stacking order from top to bottom.

[0023] Optionally, the current scrolling distance includes the current horizontal scrolling distance; the left side of the target component to be suspended at the preset fixed position coincides with the left side of the current display interface.

[0024] Optionally, the method further includes:

[0025] If the current rolling distance is detected to be greater than the minimum value of any effective floating range, the target component to be suspended corresponding to any effective floating range is determined to be in a suspended state;

[0026] When it is necessary to display a target component that is in a floating state, the rendering is performed based on the preset floating style corresponding to the target component.

[0027] Optionally, the method further includes:

[0028] The control backend obtains the pre-determined effective floating range for each component to be floated in the target scrolling view component.

[0029] A component rendering apparatus, applied to a rendering front end, comprising:

[0030] The detection unit is used to detect the current scroll distance of the target scroll view component;

[0031] Different floating components in the target scroll view component have different effective floating ranges; the stacking order of each floating component and other components containing each floating component is higher than the same-level components within the effective floating range of each moving component.

[0032] The moving unit is used to move the target component to be suspended corresponding to any floating effective range to a preset fixed position on the current display interface for floating rendering display when the current scrolling distance is detected to be within any floating effective range.

[0033] Optionally, the current scrolling distance includes the current vertical scrolling distance; the top of the component to be suspended at the preset fixed position coincides with the top of the current display interface.

[0034] Optionally, the moving unit is further configured to:

[0035] If the current rolling distance is detected to be greater than the maximum value of any of the effective floating ranges, the target component to be suspended corresponding to any of the effective floating ranges is fixed at a first preset position;

[0036] The distance between the top of the target component to be suspended at the first preset position and the top of the target scroll view component is the maximum value of any effective suspension range.

[0037] Optionally, the minimum value of the effective floating range is greater than or equal to the distance between the top of the initial position of the component to be suspended and the top of the target scrolling view component.

[0038] Optionally, the method for determining the effective suspension range includes:

[0039] Traverse each component to be floated in the target scroll view component from top to bottom, and perform the following steps;

[0040] The distance between the top of the initial position of the currently traversed floating component and the top of the target scroll view component is determined as the minimum value of the effective floating range corresponding to the currently traversed floating component.

[0041] If the currently traversed floating component is not the last floating component, determine the distance between the top of the initial position of the next floating component and the top of the target scroll view component, and then determine the maximum value of the corresponding floating effective range as the difference between the determined distance and the height of the currently traversed floating component.

[0042] If the currently traversed component to be floated is the last component to be floated, the difference between the height of the target scroll view component and the height of the currently traversed component to be floated is determined as the maximum value of the corresponding effective floating range.

[0043] Optionally, the method for setting the stacking order of components in the target scrolling view component includes:

[0044] For each sibling component in the target scroll view component, set the stacking order from top to bottom.

[0045] Optionally, the current scrolling distance includes the current horizontal scrolling distance; the left side of the target component to be suspended at the preset fixed position coincides with the left side of the current display interface.

[0046] Optionally, the moving unit is further configured to:

[0047] If the current rolling distance is detected to be greater than the minimum value of any effective floating range, the target component to be suspended corresponding to any effective floating range is determined to be in a suspended state;

[0048] When it is necessary to display a target component that is in a floating state, the rendering is performed based on the preset floating style corresponding to the target component.

[0049] Optionally, the device further includes:

[0050] The acquisition unit is used to acquire the corresponding effective floating range that the control backend has predetermined for each component to be suspended in the target scrolling view component.

[0051] This technical solution allows for the floating display effect of components at any level within a scrolling view component by moving the components, thereby increasing the freedom in setting the floating display effect and improving the developer experience. Attached Figure Description

[0052] To more clearly illustrate the technical solutions in the embodiments of this specification 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 only some embodiments recorded in the embodiments of this specification. For those skilled in the art, other drawings can be obtained based on these drawings.

[0053] Figure 1 This is a flowchart illustrating a component rendering method provided in an embodiment of this specification;

[0054] Figure 2 This is a schematic diagram illustrating the principle of a component-based suspended ceiling provided in the embodiments of this specification;

[0055] Figure 3 This is a schematic diagram of the structure of a component rendering device provided in the embodiments of this specification;

[0056] Figure 4 This is a schematic diagram of the structure of a device used to configure the methods of the embodiments of this specification. Detailed Implementation

[0057] To enable those skilled in the art to better understand the technical solutions in the embodiments of this specification, the technical solutions in the embodiments of this specification will be described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this specification, and not all of the embodiments. Based on the embodiments in this specification, all other embodiments obtained by those skilled in the art should fall within the scope of disclosure.

[0058] In front-end design, there is a component floating interface display effect, which can fix a specified component in the same position on the display interface and prevent it from changing position as the interface is scrolled, thereby improving the front-end display effect.

[0059] For example, a component on the interface can be fixed at the top of the display screen and will not change position as the interface is scrolled up or down, achieving a sticky display effect; or a component on the interface can be fixed on the left side of the display screen and will not change position as the interface is scrolled left or right, achieving a side-sticking effect.

[0060] However, the technologies used to achieve the floating component display effect are often subject to many limitations, making it impossible to set only the floating display effect of the component, and the degree of freedom in setting the floating display effect of the component is low.

[0061] For example, the floating sticky display effect can usually only be set for the direct child views of the scroll view, which has low flexibility and a poor experience for developers.

[0062] To address the aforementioned issues, increase the flexibility in setting the floating display effect of components, and improve the developer experience, this specification provides a component rendering method.

[0063] In this method, the rendering front-end can detect the sliding distance of the component that needs to be displayed floating. When the floating display effect of the component is required, the component can be moved to a preset fixed position on the current display interface based on the detected current sliding distance. This fixes the component in the same position on the display interface and prevents it from changing position as the interface slides, thus achieving the floating display effect of the component.

[0064] The above method achieves the floating display effect of components by moving them, regardless of whether the component is a direct child view of the scroll view component. Any component at any level in the scroll view component can achieve the floating display effect by moving the component, thereby increasing the freedom of setting the floating display effect of components and improving the developer experience.

[0065] Furthermore, in many current UI presentation architectures, a rendering front-end and a control back-end can often work together to present the interface. For example, in the React Native architecture, there is a native side for rendering and a JavaScript side for control.

[0066] The rendering front-end can be the end used to implement page rendering; the control back-end can be the end used to control page rendering, specifically the end that controls the rendering front-end to implement page rendering.

[0067] The control backend can send rendering commands and data to the rendering frontend, causing the rendering frontend to execute the corresponding rendering commands to perform rendering. For example, whether to enable component floating.

[0068] The rendering frontend can also return page interaction operations and display status to the control backend, such as user scrolling operations on the interface, scrolling status of scroll views, and the current position of components.

[0069] Optionally, the rendering front-end and the control back-end can be two separate processes.

[0070] In a specific example, the use of a rendering front-end and a control back-end to collaboratively render and display the interface is often intended to enable the code to run in multiple different environments, such as iOS and Android platforms, through a single development effort.

[0071] Typically, as the interface changes, or when implementing a floating display effect for components within the interface, frequent data communication is often required between the rendering front-end and the control back-end.

[0072] For example, the rendering frontend detects the scroll direction and sends it to the control backend. The control backend determines whether to achieve a certain effect and then sends instructions or data to the rendering frontend for rendering. Alternatively, the rendering frontend detects the scroll distance and sends it to the control backend. The control backend determines whether to achieve a component floating and sticking to the top effect and then sends instructions or data to the rendering frontend for rendering.

[0073] In a specific example, the backend can be controlling a component to be copied in real time and rendered at the top of the screen to achieve a floating, sticky effect. As the screen scrolls, the backend needs to frequently send commands to copy the component and frequently send data on the position of the copied component.

[0074] In this method, when implementing the floating component display effect, the calculation and rendering can be performed by the rendering front-end (e.g., by the native side in the React Native architecture), without the need for data communication with other programs (e.g., in the React Native architecture, the native side does not need to communicate with the JS side). Specifically, it does not need to communicate with the control back-end, thereby improving the rendering efficiency of the front-end, improving the implementation efficiency of the floating component display effect, reducing communication costs, and thus improving the rendering effect, specifically improving the smoothness of the floating component display effect.

[0075] In one specific example, the backend can send the rules or data related to the floating component display effect directly to the rendering frontend in one go, and the rendering frontend can then implement the floating component display effect itself. Alternatively, the rules for the floating component display effect can be written directly within the rendering frontend, and the rendering frontend can then implement the floating component display effect itself.

[0076] The following section, with reference to the accompanying drawings, provides a detailed explanation of a component rendering method provided in an embodiment of this specification.

[0077] like Figure 1 The diagram shown is a flowchart illustrating a component rendering method provided in an embodiment of this specification.

[0078] This method can be applied to the rendering front-end. In a specific example, the rendering front-end can be the native side in the React Native architecture.

[0079] Optionally, corresponding to the rendering frontend, it can be controlled and communicated with by the control backend. In a specific example, the control backend can be the JavaScript side of the React Native architecture.

[0080] Optionally, the rendering front-end can be one end used to implement page rendering; the control back-end can be one end used to control page rendering, specifically the end that controls the rendering front-end to implement page rendering.

[0081] This method does not limit whether the rendering front-end and the control back-end are deployed on the same device. Optionally, the rendering front-end and the control back-end can be deployed on the same device, specifically different functional modules of the same application, or the rendering front-end can be deployed on the terminal, while the control back-end can be deployed on the server.

[0082] This method may specifically include the following steps.

[0083] S101: Detect the current scroll distance of the target scroll view component.

[0084] Optionally, different floating components in the target scroll view component have different effective floating ranges; the stacking order of each floating component and other components containing the floating component is higher than the peer components within the effective floating range of the floating component.

[0085] Optionally, the effective levitation ranges corresponding to different components to be levied may not overlap.

[0086] S102: If the current scrolling distance is detected to be within any floating effective range, the target component to be floated corresponding to the floating effective range is moved to a preset fixed position on the current display interface for floating rendering display.

[0087] This method detects the current scroll distance of the target scroll view component and moves it to a preset fixed position on the current display screen for rendering when a floating effect is required. This keeps the component fixed in the same position on the display screen, preventing it from changing position as the screen scrolls, thus achieving a floating display effect. The floating effect can be achieved by moving components, regardless of whether the component is a direct child of the scroll view component. Components at any level within the scroll view component can achieve a floating display effect by moving them, thereby increasing the freedom in setting the floating display effect and improving the developer experience.

[0088] Furthermore, in this method, the rendering frontend itself can directly detect whether the current scroll distance is within any valid floating range, without communicating with other programs. It can directly move the component to be floating to achieve the floating effect, thereby reducing communication costs and improving the rendering efficiency and quality of the rendering frontend. Specifically, this can be achieved by improving rendering efficiency, rendering speed, and rendering smoothness.

[0089] This method does not limit the preset fixed position of the component to be suspended.

[0090] Optionally, different components to be suspended can correspond to the same or different preset fixed positions.

[0091] Optionally, the preset fixed position can be the top of the display interface to achieve a floating ceiling effect; the preset fixed position can also be the bottom of the display interface; the preset fixed position can also be the side of the display interface to achieve a side suction effect; the preset fixed position can also be the middle of the display interface, etc.

[0092] This method does not limit the scrolling direction of the target scroll view component.

[0093] Optionally, the target scroll view component can be either vertically scrolling or horizontally scrolling. Correspondingly, the current scroll distance can include the current vertical scroll distance and / or the current horizontal scroll distance.

[0094] Optionally, since components typically scroll from top to bottom, the current vertical scroll distance can typically include the distance between the top of the currently displayed interface and the top of the target scroll view component. Specifically, it can be equal to the distance between the vertical position of the top of the currently displayed interface within the target scroll view component and the top of the target scroll view component.

[0095] Optionally, for a target scroll view component that scrolls from left to right, the current horizontal scroll distance can typically be equal to the distance between the horizontal position of the left edge of the currently displayed interface within the target scroll view component and the left edge of the target scroll view component.

[0096] Optionally, corresponding to the current scroll distance, the situation where the component to be floated needs to achieve the component floating effect is usually when the target scroll view component scrolls to a certain position, that is, when the current scroll distance is within a certain numerical range.

[0097] Therefore, optionally, the effective floating range corresponding to the component to be floating may include the scroll distance range of the target scroll view component. If the current scroll distance is within the effective floating range, it can be determined that the component to be floating within that range needs to achieve a floating display effect.

[0098] In one optional embodiment, a floating, sticky-on-the-top effect of the component can be achieved. Therefore, optionally, the current scroll distance may include the current vertical scroll distance; the top of the target component to be floating at a preset fixed position can coincide with the top of the currently displayed interface, thereby achieving a floating, sticky-on-the-top effect of the target component to be floating.

[0099] In one optional embodiment, a floating, sticky-on-the-top effect can be achieved for the component. This embodiment does not limit the correlation between the scrolling direction and the floating effect. Optionally, the current scrolling distance may include the current horizontal scrolling distance; the top of the target component to be floating at a preset fixed position may coincide with the top of the currently displayed interface, thereby achieving a floating, sticky-on-the-top effect for the target component to be floating.

[0100] In one optional embodiment, the left side of the component can be snapped together. Therefore, optionally, the current scrolling distance may include the current horizontal scrolling distance; the left side of the target component to be suspended at a preset fixed position coincides with the left side of the currently displayed interface, thereby still achieving the left side snapping together effect of the target component to be suspended.

[0101] In one optional embodiment, the bottom of the component can be attached. Therefore, optionally, the current scrolling distance may include the current vertical scrolling distance; the bottom of the target component to be suspended at a preset fixed position can coincide with the bottom of the current display interface, thereby achieving the bottom attachment effect of the target component to be suspended.

[0102] Of course, other component floating effects can also be implemented accordingly, which will not be elaborated here.

[0103] The above method and process will be explained in detail below.

[0104] 1. S101: Detect the current scroll distance of the target scroll view component.

[0105] 1. This method does not limit the specific target scroll view component to any scroll view component that the front-end needs to render and display. This makes it easier to implement the floating display effect of the component when the interface is scrolling for the target scroll view component.

[0106] Optionally, the target scroll view component may include one or more components to be floated.

[0107] Optionally, the component to be floated can be a component that needs to achieve a component floating effect.

[0108] The component to be floated can be a direct child component of the target scroll view component, or a child component at multiple levels.

[0109] For example, the target scroll view component may include multiple container sub-components, and each container sub-component may include one sub-component as the component to be floated.

[0110] 2. The current scroll distance of the target scroll view component can be detected by the rendering front-end, rather than by the control back-end.

[0111] In this method, the rendering front-end can detect the current scroll distance of the target scroll view component to determine whether the component to be floated needs to implement a component floating effect, and then implement the component floating effect by moving the component. This does not require the back-end to participate, thereby improving the efficiency of the rendering front-end in implementing the component floating effect, improving the smoothness of the component floating effect, and reducing communication costs.

[0112] Optionally, the current scroll distance of the target scroll view component, specifically the current scroll pixel value.

[0113] Optionally, the current scroll distance of the target scroll view component can be continuously detected. Specifically, the current scroll distance of the target scroll view component can be continuously detected or monitored through its events, thereby improving component rendering and enhancing the real-time performance of the component's hover effect.

[0114] 3. Regarding the effective range of suspension.

[0115] To make it easier to explain, the following example uses the implementation of a floating, sticky component effect.

[0116] Optionally, the current scroll distance may include the current vertical scroll distance; the top of the target floating component at the preset fixed position may coincide with the top of the currently displayed interface.

[0117] Optionally, different components to be floated in the target scroll view component have different effective floating ranges.

[0118] Optionally, the effective floating range can be the range within which the corresponding component to be floated needs to achieve a floating top effect. Specifically, it can be based on the vertical scrolling distance, and the effective floating range can include the range of vertical scrolling distance values ​​of the target scrolling view component.

[0119] For example, the effective floating range for the component to be floating can include the vertical scrolling distance of the target scrolling view component, ranging from 5 to 100. Therefore, when the actual vertical scrolling distance of the target scrolling view component is between 5 and 100, it can be determined that the component to be floating needs to achieve a floating effect, and thus the floating effect can be achieved by moving the component to be floating to the top of the current display interface.

[0120] Therefore, by detecting whether the current vertical scrolling distance is within the effective range of the suspension, it can be determined whether the component to be suspended needs to achieve a suspension effect.

[0121] This method does not limit the value of the effective levitation range of the component to be levied.

[0122] Optionally, the component to be levitated can achieve a levitation effect starting from the top of its initial position. The effective levitation range corresponding to the component to be levitated begins from the top of its initial position.

[0123] For example, the top of the initial position of the component to be suspended corresponds to the vertical scrolling distance of 10 of the target scrolling view component. Therefore, when the top of the current display interface slides to below the top of the initial position of the component to be suspended, specifically when it slides to 15, the component to be suspended can be moved to the top of the current display interface to achieve the floating and sticking-on effect.

[0124] Optionally, the effective levitation range corresponding to the component to be levied can start from above the top of the initial position of the component to be levied.

[0125] For example, the top of the initial position of the component to be suspended can correspond to the vertical scrolling distance of the target scrolling view component, which is 50, and the corresponding effective floating range can include the vertical scrolling distance of the target scrolling view component, which is 20 to 40.

[0126] Optionally, the effective levitation range of the component to be levitated can start from below the top or bottom of the initial position of the component to be levitated.

[0127] For example, the top of the initial position of the component to be suspended can correspond to the vertical scrolling distance of the target scrolling view component, which is 50, and the corresponding effective floating range can include the vertical scrolling distance of the target scrolling view component, which is 70 to 80.

[0128] In this embodiment, the effective suspension range of the component to be suspended can be set according to actual needs, thereby achieving a variety of suspended ceiling effects and increasing the degree of freedom in achieving the suspension effect.

[0129] Optionally, the floating effect is usually implemented after the component to be floating is rendered and displayed at its initial position.

[0130] Therefore, optionally, the minimum value of the effective floating range can be greater than or equal to the distance between the top of the initial position of the component to be floated and the top of the target scroll view component.

[0131] In this embodiment, the effective levitation range of each component to be levied can be defined as starting from the top of the initial position of the component to be levied and then thereafter.

[0132] It should be noted that the initial position of the component to be floated can specifically refer to the initial position of the component to be floated within the target scroll view component.

[0133] In an alternative embodiment, the target scroll view component may include multiple components to be floated, and different components to be floated may correspond to different effective floating ranges.

[0134] Since this method achieves the floating ceiling effect by moving components, to avoid different components from obscuring each other, at most one component can usually be floating ceiling at the same time.

[0135] Therefore, optionally, the effective levitation ranges corresponding to different components to be levied can be mutually exclusive, thereby ensuring that at most one component to be levied can achieve the levitation ceiling effect.

[0136] Of course, optionally, the effective levitation ranges of different components to be levied may overlap.

[0137] This method does not limit the method for determining the effective levitation range of the component to be levied.

[0138] Alternatively, developers can manually configure this according to actual needs.

[0139] Alternatively, it can be determined automatically. Specifically, the effective floating range can be set to a fixed distance below the initial position of the component to be floating, or it can be set to the range between the top and bottom of the parent component where the component to be floating is located.

[0140] In one alternative embodiment, the effective floating range of each component can be determined based on its initial position within the target scrolling view component.

[0141] Optionally, the method for determining the effective floating range may include: traversing each component to be floated in the target scrolling view component from top to bottom and performing the following steps: determining the distance between the top of the initial position of the currently traversed component to be floated and the top of the target scrolling view component as the minimum value of the effective floating range corresponding to the currently traversed component to be floated, and then determining the maximum value of the corresponding effective floating range for the currently traversed component to be floated.

[0142] This embodiment does not specifically limit the maximum value of the effective suspension range.

[0143] Optionally, the maximum value of the effective floating range of the currently traversed component can be determined based on the initial position of the next component to be floated.

[0144] Optionally, the vertical scrolling distance corresponding to the top of the initial position of the next floating component can be determined as the maximum value of the effective floating range of the currently traversed floating component.

[0145] Specifically, since the currently traversed floating component can maintain its floating effect within the effective floating range until the next floating component slides to the top of the interface, the height of the currently traversed floating component can be subtracted. This allows the currently traversed floating component to not need to maintain its floating effect when the top of the next floating component slides to the bottom of the currently traversed floating component. Specifically, the top of the next floating component can slide to a position that coincides with the bottom of the currently traversed floating component.

[0146] Optionally, the distance between the top of the initial position of the next floating component and the top of the target scroll view component can be determined, and the difference between the determined distance and the height of the currently traversed floating component can be determined as the maximum value of the floating effective range corresponding to the currently traversed floating component.

[0147] Optionally, when specifically traversing the components to be floated, there is a last component to be floated, and it is impossible to determine the maximum value of the corresponding effective floating range based on the next component to be floated.

[0148] This embodiment does not limit the method for determining the maximum value of the effective floating range corresponding to the last floating component. Optionally, the maximum vertical scrolling distance of the target scrolling view component can be directly determined as the maximum value of the effective floating range corresponding to the last floating component.

[0149] Optionally, the difference between the vertical scrolling distance corresponding to the bottom of the target scroll view component and the height of the last component to be floated can be determined as the maximum value of the effective floating range corresponding to the last component to be floated.

[0150] Therefore, optionally, if the currently traversed floating component is not the last floating component, determine the distance between the top of the initial position of the next floating component and the top of the target scroll view component, and then determine the difference between the determined distance and the height of the currently traversed floating component as the maximum value of the corresponding floating effective range.

[0151] Optionally, if the currently traversed component to be floated is the last component to be floated, the difference between the height of the target scroll view component and the height of the currently traversed component to be floated is determined as the maximum value of the corresponding floating effective range.

[0152] In one optional embodiment, the effective floating range corresponding to the component to be levitated can be predetermined, so that the subsequent rendering front end can directly use the predetermined effective floating range to determine the component to be levitated that needs to achieve the levitation effect.

[0153] This method does not limit the execution entity that determines the effective levitation range of the component to be levied.

[0154] Alternatively, the effective floating range of the component to be floating can be determined by the control backend or the rendering frontend.

[0155] Optionally, when determining the effective range of the floating component, it may be necessary to use the height or initial position of the component to be floating. Therefore, for each component to be floating in the target scroll view component, the height and / or initial position of the component to be floating can be obtained.

[0156] In a specific example, within the React Native architecture, the initial position (screenY) and height of each component to be floated can be obtained through the onLayout event.

[0157] Then, the effective floating range of each component can be calculated by sorting the screenY and height of each component to be floated.

[0158] Optionally, if the effective floating range is determined by the control backend, the rendering frontend can obtain the corresponding effective floating range pre-determined by the control backend for each component to be floated in the target scroll view component.

[0159] Optionally, the rendering front-end can predetermine the corresponding effective floating range for each component to be floated in the target scrolling view component. This embodiment can reduce communication between the rendering front-end and the control back-end.

[0160] The above embodiments illustrate the implementation of the component's floating ceiling effect.

[0161] For other types of component suspension, such as component suspension with the left side adsorbed, component suspension with the bottom side adsorbed, and component suspension with the center fixed, the effective suspension range can also be determined accordingly.

[0162] In one alternative embodiment, the component can be suspended and adsorbed on the left side.

[0163] Optionally, the current scroll distance may include the current horizontal scroll distance; the left side of the target floating component at the preset fixed position may coincide with the left side of the currently displayed interface.

[0164] Optionally, the minimum value of the effective floating range can be greater than or equal to the distance between the left edge of the initial position of the component to be floated and the left edge of the target scroll view component.

[0165] Optionally, the method for determining the effective range of the hover may include: traversing each component to be hovered in the target scroll view component from left to right and performing the following steps;

[0166] The distance between the left edge of the initial position of the currently traversed floating component and the left edge of the target scroll view component is determined as the minimum value of the effective floating range corresponding to the currently traversed floating component.

[0167] If the currently traversed floating component is not the last floating component, determine the distance between the left edge of the initial position of the next floating component and the left edge of the target scroll view component. Then, determine the maximum value of the corresponding floating effective range as the difference between the determined distance and the width of the currently traversed floating component.

[0168] If the currently traversed component to be floated is the last component to be floated, the difference between the width of the target scroll view component and the width of the currently traversed component to be floated is determined as the maximum value of the corresponding floating effective range.

[0169] Of course, this embodiment does not limit the specific method for determining the effective range of suspension; the above embodiment is for illustrative purposes only.

[0170] For other types of component levitation, the corresponding method for determining the effective levitation range can be obtained based on the explanation of the above embodiments.

[0171] This method does not limit the execution entity that determines the effective levitation range of the component to be levied.

[0172] Alternatively, the effective floating range of the component to be floating can be determined by the control backend or the rendering frontend.

[0173] Optionally, if the effective floating range is determined by the control backend, the rendering frontend can obtain the corresponding effective floating range pre-determined by the control backend for each component to be floated in the target scroll view component.

[0174] Optionally, the rendering front-end can predetermine the corresponding effective floating range for each component to be floated in the target scrolling view component. This embodiment can reduce communication between the rendering front-end and the control back-end.

[0175] 4. The stacking order of components that implement the floating effect with other components.

[0176] In this process, as the component to be floated achieves the floating effect, other components in the target sliding view component may overlap with the component to be floated as it slides.

[0177] The floating effect usually requires the component to be floating to be above other components, so that the component to be floating obscures other components to achieve the floating effect. Therefore, within the effective floating range where the floating effect needs to be achieved, it is necessary to ensure that the component to be floating is not obscured by other components within the corresponding effective floating range.

[0178] Furthermore, during front-end rendering, due to the different levels of parent and child components, when determining the stacking order for overlapping components, it is usually done by first comparing the stacking order between the parent components. Each child component in the parent component with a higher stacking order can occlude the parent component with a lower stacking order and all its child components.

[0179] Therefore, in order to ensure the levitation effect of the component to be levitated, optionally, the stacking order of each component to be levitated and other components containing the component to be levitated can be higher than that of the same level components within the effective levitation range of the component to be levitated.

[0180] Specifically, for each component to be suspended, the stacking order can be set so that the stacking order of the component to be suspended is higher than that of the same level components within the effective suspending range of the component to be suspended.

[0181] For other components that include the component to be floated, specifically, the other components and the component to be floated can be in a direct parent-child relationship or an indirect parent-child relationship. In order to ensure that these other components are not obscured, the stacking order can be set so that the stacking order of these other components that include the component to be floated is higher than that of the peer components within the effective floating range of the component to be floated.

[0182] In this embodiment, for each component to be suspended, within the corresponding effective suspension range, since the stacking order of the component to be suspended and other components containing the component to be suspended is higher than that of the same level components within the corresponding effective suspension range, as the target scroll view component slides, the components that overlap with the component to be suspended within the effective suspension range can not obscure the component to be suspended, thereby facilitating the implementation of the suspension effect.

[0183] Optionally, the peer components within the effective suspension range may specifically include peer components that intersect with the effective suspension range.

[0184] In a specific example, the stacking order of components can be achieved by setting the z-index of the components.

[0185] Furthermore, this method flow does not limit the method and execution entity for setting the stacking order between components.

[0186] Optionally, the stacking order between components can be set manually, as long as the stacking order of each component to be floated and other components containing the component to be floated is higher than the same level components within the effective floating range of the component to be floated.

[0187] Optionally, the stacking order can be automatically set for the effective floating range in a specific situation.

[0188] In one alternative embodiment, the floating ceiling effect of the component is taken as an example.

[0189] Optionally, if the minimum value of the effective floating range is greater than or equal to the distance between the top of the initial position of the component to be floated and the top of the target scroll view component, the effective floating range of each component to be floated starts from the top of the initial position of the component to be floated or below the top of the initial position.

[0190] Correspondingly, in order to ensure that the stacking order of each component to be floated and other components containing it is higher than that of the peer components within the effective floating range of the component to be floated, since the effective floating range of each component to be floated starts at or below the top of the initial position of the component to be floated, the stacking order of each peer component in the target scroll view component can be set from high to low according to the order from top to bottom.

[0191] In this embodiment, for each component to be suspended, the stacking order of the peer components below the component to be suspended is lower than that component.

[0192] For other components that contain the component to be floated, the stacking order of the sibling components below that other component is lower than that other component.

[0193] Furthermore, since the effective levitation range corresponding to each component to be levied starts at or below the initial position of the component to be levied, for each component to be levied, the peer components included in the corresponding effective levitation range are all below the component to be levied. Thus, the stacking order of each component to be levied can be determined, which is higher than the peer components included in the corresponding effective levitation range.

[0194] Furthermore, for other components containing the component to be suspended, the components of the same level included in the effective suspension range corresponding to the component to be suspended are all below the other components. Thus, it can be determined that the stacking order of other components containing the component to be suspended is higher than the components of the same level included in the effective suspension range corresponding to the component to be suspended.

[0195] Optionally, the method for setting the stacking order of components in the target scrolling view component may include: setting the stacking order from high to low for each layer of sibling components in the target scrolling view component, in a top-to-bottom order. This embodiment can conveniently and better achieve the floating effect of the component to be floating.

[0196] Other types of component floating display effects can also refer to the above embodiments, so that the stacking order of each component to be floating and other components containing the component to be floating is higher than the same level components within the corresponding floating effective range of the component to be floating.

[0197] In one alternative embodiment, the component can be suspended and adsorbed on the left side.

[0198] Optionally, the minimum value of the effective floating range can be greater than or equal to the distance between the left edge of the initial position of the component to be floated and the left edge of the target scroll view component.

[0199] Optionally, the method for setting the stacking order of components in the target scroll view component may include: setting the stacking order from high to low for each level of sibling components in the target scroll view component, in order from left to right.

[0200] For a detailed explanation, please refer to the above embodiments.

[0201] In addition, in an optional embodiment, in order to facilitate setting the stacking order of components, the effective levitation ranges corresponding to different components to be levied may not overlap, thereby facilitating the setting of the stacking order of the components to be levied and other components containing the components to be levied.

[0202] Alternatively, for any component to be levitated, if the levitated component is located within the effective levitation range of other components to be levitated, and the other components to be levitated are not within the effective levitation range of the levitated component.

[0203] Optionally, for any two components to be suspended, there may not be a situation where the two components to be suspended are within each other's corresponding effective suspension range.

[0204] Optionally, the stacking order of each component to be levitated and other components containing that component can be higher than the preset peer components within the effective levitation range of that component. These preset peer components may not include other components to be levitated.

[0205] For sibling components, including other components to be suspended, this embodiment does not limit the specific stacking order. Optionally, the stacking order can be set in a fixed order, or an equal stacking order can be set. A fixed order is, for example, from top to bottom, or from left to right.

[0206] Optionally, the stacking order of each component to be suspended and other components containing that component can be equal to the peer components containing other components within the effective suspending range of that component.

[0207] Optionally, the stacking order can be set based on a fixed order for each component to be floated, other components containing the component to be floated, and peer components containing other components within the effective floating range of the component to be floated.

[0208] 2. S102: If the current scrolling distance is detected to be within any floating effective range, the target component to be floated corresponding to the floating effective range is moved to a preset fixed position on the current display interface for floating rendering display.

[0209] In one alternative embodiment, the implementation of a component floating ceiling effect is taken as an example.

[0210] Optionally, in order to achieve the ceiling-mounting effect, the top of the target component to be suspended at a preset fixed position can coincide with the top of the current display interface.

[0211] Specifically, the distance between the top of the target floating component and the top of the target scroll view component can be the current vertical scroll distance.

[0212] Optionally, if the current vertical scrolling distance is detected to be within any effective floating range, it can be determined that the component to be suspended within that effective floating range needs to achieve a levitation effect.

[0213] Therefore, the target component to be floated corresponding to the effective floating range can be moved to a preset fixed position on the current display interface for floating rendering display.

[0214] Optionally, the preset fixed position of the current display interface can be determined based on the current vertical scroll distance, thereby ensuring that the target component to be floated after being moved is located at the top of the currently rendered and displayed interface, achieving a floating and sticky effect.

[0215] In one alternative embodiment, if the minimum value of the effective floating range is greater than or equal to the distance between the top of the initial position of the component to be floated and the top of the target scroll view component, the effective floating range of each component to be floated begins at or below the top of the initial position of the component to be floated.

[0216] Correspondingly, specifically moving the target component to be floated to a preset fixed position on the current display interface for floating rendering can be done by moving the target component to be floated down a preset distance for rendering.

[0217] Optionally, the method for determining the preset distance may include: determining the distance between the top of the target floating component in its initial state and the top of the target scrolling view component, and then subtracting the determined distance from the current vertical scrolling distance to obtain the preset distance.

[0218] Alternatively, since the target component to be floated needs to move during the rendering process, it is necessary to pre-set the target component to be floated to be a component that can move its position.

[0219] Optionally, the target component to be hovered can be an animated component, thus allowing it to be moved.

[0220] For example, in the React Native architecture, the target component to be floated can be wrapped with the Animated.View component, which allows it to be moved and achieves animation effects.

[0221] For other types of component floating display effects, the above embodiments can also be used to realize component movement.

[0222] Third, if the current scrolling distance exceeds the maximum value of any effective floating range, the target component to be floated corresponding to that effective floating range does not need to achieve a floating effect.

[0223] Optionally, as the current scrolling distance increases, when the current scrolling distance just exceeds the maximum value of any effective floating range, the floating effect of the target component to be floated corresponding to that effective floating range can be canceled.

[0224] This method does not limit the way to cancel the floating effect of the target component.

[0225] Alternatively, the target component to be suspended can be directly restored to its initial position.

[0226] Alternatively, to improve the smoothness of the interface rendering, the target component to be floated can be fixed in one position, so that the component can move as the view scrolls even when the float effect is canceled.

[0227] Of course, this method does not limit the specific fixed position; alternatively, it can be a certain position where the target component to be floated achieves the floating effect.

[0228] Therefore, in one alternative embodiment, the implementation of a component floating ceiling effect is taken as an example.

[0229] Optionally, if the current scrolling distance is detected to be greater than the maximum value of any effective floating range, the target component to be suspended corresponding to the effective floating range is fixed at a first preset position.

[0230] Optionally, the distance between the top of the target component to be suspended at the first preset position and the top of the target scroll view component can be the maximum value of the effective suspension range.

[0231] The first preset position can be the location of the target component to be suspended when the current scroll distance is the maximum value of the effective range of the suspension.

[0232] Optionally, when the current scrolling distance is equal to the maximum value of any effective floating range, the target component to be floated corresponding to the effective floating range can be moved to a first preset position to achieve a floating effect.

[0233] As the current scrolling distance increases, when the current scrolling distance is just greater than the maximum value of any floating effective range, the target component to be floated corresponding to the floating effective range can be fixed at the first preset position, and the floating effect can be canceled. Thus, as the current scrolling distance increases, the target component to be floated will move accordingly, thereby achieving a smooth transition display effect.

[0234] Alternatively, fixing the target component to be suspended at a first preset position can also allow for a smooth transition of the target component to be suspended as the current scrolling distance decreases from greater than the maximum value of the corresponding effective suspension range to the maximum value of the effective suspension range.

[0235] Subsequently, as the current scrolling distance further decreases to just below the maximum value of the corresponding effective floating range, the floating effect can be achieved based on the target component to be floated at the first preset position.

[0236] This embodiment can improve the rendering and display effect of the target component to be suspended.

[0237] Other types of component floating display effects can also refer to the above embodiments. When the current scrolling distance is detected to be greater than the maximum value of any floating effective range, the target component to be floating corresponding to the floating effective range is fixed in a position.

[0238] In one alternative embodiment, the component can be suspended and adsorbed on the left side.

[0239] Optionally, if the current rolling distance is detected to be greater than the maximum value of any effective floating range, the target component to be suspended corresponding to the effective floating range is fixed at a second preset position;

[0240] The distance between the left side of the target component to be suspended at the second preset position and the left side of the target scroll view component is the maximum value of the effective range of the suspension.

[0241] For a detailed explanation, please refer to the above embodiments.

[0242] In an alternative embodiment, to further enhance the floating effect, the component to be floating can be highlighted by updating its style.

[0243] For example, you can add a shadow effect to a component that is trying to achieve a floating effect, thereby highlighting the floating effect of the component.

[0244] You can also add color or bold text to the component that is currently being made to float, thereby highlighting the floating effect of the component.

[0245] To improve the display effect of components, the style can be updated according to the floating state of the component.

[0246] Optionally, if the current scroll distance is detected to be within any floating effective range, the target component to be floated corresponding to the floating effective range can be determined to be in a floating state; if it is necessary to display the target component to be floated in a floating state, the preset floating style corresponding to the target component to be floated can be used for rendering and display.

[0247] Alternatively, if the current scroll distance exceeds the maximum value of any effective floating range, the current scroll distance may decrease as scrolling continues, returning to the effective floating range. In this case, the target component to be floated needs to achieve a floating effect.

[0248] To improve rendering efficiency and the smoothness of the hovering effect, alternatively, the target component to be hovered can be fixed in one position, or the target component to be hovered can maintain its style unchanged when hovering.

[0249] Therefore, optionally, if the current scrolling distance is detected to be greater than the minimum value of any floating effective range, the target component to be floated corresponding to the floating effective range can be determined to be in a floating state; if it is necessary to display the target component to be floated in a floating state, the preset floating style corresponding to the target component to be floated can be used for rendering and display.

[0250] It should be noted that the situation where the target component to be floated needs to be displayed in a floating state can include the current display interface containing the target component to be floated, and it is not related to whether the current scroll distance is within the effective floating range.

[0251] This embodiment does not limit the specific component to the preset floating style.

[0252] Optionally, different floating components can correspond to different preset floating styles, or they can correspond to the same preset floating style.

[0253] Optionally, preset floating styles may include the component's color, shadow, font weight, border style, etc.

[0254] For example, the preset floating style for the component to be floating may include adding a shadow effect and bolding the characters displayed by the component.

[0255] For ease of understanding, this specification also provides a specific method embodiment.

[0256] like Figure 2 The diagram shown is a schematic representation of the principle of a component-based suspended ceiling provided in an embodiment of this specification.

[0257] This includes the target scroll view component and the currently displayed interface. The target scroll view component can include three container components (container components 1-3), and each container component includes one component to be floated (including component 1-3). Each component to be floated corresponds to a floating effective area (including floating effective areas 1-3).

[0258] Figure 2 The text shows the current display interface from time 1 to time 3, from front to back.

[0259] As the target scroll view component scrolls, the currently displayed interface also moves downwards.

[0260] During the process from time 1 to time 2, since the vertical scrolling distance is within the effective floating range 1, the floating effect of the component to be floating 1 can be achieved, and the component to be floating 1 can be moved to the first preset position, which is the top of the current display interface.

[0261] During the process from time 2 to time 3, as the vertical scrolling distance increases, the target scrolling view component continues to scroll downwards, and the vertical scrolling distance gradually separates from the floating effective range 1. Therefore, the component to be suspended 1 can be fixed at the second preset position, which is the position corresponding to the maximum value of the floating effective range 1.

[0262] against Figure 2 The target scrolling view component shown in the image can be made to float using the following steps. For example, this can be implemented within a React Native architecture.

[0263] Specifically, this may include the following steps.

[0264] S201: Set a decreasing Zindex based on the creation order of container components, which means setting a decreasing stacking order. Specifically, it can be based on the top-to-bottom order of container components, that is, the stacking order of container component 1 is higher than the stacking order of container component 2; the stacking order of container component 2 is higher than the stacking order of container component 3.

[0265] S202: Set a decreasing Zindex based on the creation order of child components in each container component, which means setting a stacking order that decreases from top to bottom.

[0266] S203: Obtain the initial position (screenY) and height of each component to be floated through the onLayout event.

[0267] S204: Determine the effective floating area for each component based on its screenY and height.

[0268] Optionally, the effective floating area for each component to be floating can be set manually or automatically, including the vertical scrolling distance top corresponding to the top of the initial position of the component to be floating, and the vertical scrolling distance corresponding to the bottom of the parent component where the component to be floating is located.

[0269] Specifically, the areaBottom of each component to be floated can be calculated by sorting. The vertical scroll distance corresponding to the top of the initial position of the next component to be floated can be set to the areaBottom of the previous component. The areaBottom of the last component to be floated can be set to a maximum value or a fixed value, such as the bottom of the target scroll view component, or 999999.

[0270] The effective floating area of ​​each component can be determined by areaBottom, which is the vertical scroll distance top corresponding to the top of the initial position of the component to be floated, to the difference between areaBottom and height (areaBottom-height) of the component to be floated.

[0271] Optionally, steps S201-S204 can be executed by either the control backend or the rendering frontend. For example, they can be executed by either the JS side (control backend) or the native side (rendering frontend) in a React Native architecture.

[0272] Furthermore, the following steps are required to achieve component levitation.

[0273] S205: Add a scroll event to the target scroll view component so that the current vertical scroll distance ScrollY can be continuously detected (specifically, ScrollY can be set to the Animated.Value type).

[0274] S206: Based on the detected current vertical scrolling distance, determine the component to be suspended that needs to achieve a floating effect, and then determine the vertical movement distance translateY of the component to be suspended.

[0275] `tranlateY` ​​can be included in the component style, thus applying the style to `Animated.View`, which is the component that needs to achieve a floating effect, making the `Animated.View` component float and stick to the top.

[0276] Since the floating effect is achieved by controlling Animated.View, which is directly implemented by the native side, without the need for the JS side to control and notify the native side to update, rendering performance and efficiency can be improved.

[0277] Corresponding to the above method embodiments, this specification also provides an apparatus embodiment.

[0278] like Figure 3 The diagram shown is a structural schematic of a component rendering device provided in an embodiment of this specification.

[0279] This device can be applied to a rendering front-end. It may include the following units.

[0280] The detection unit 301 is used to detect the current scroll distance of the target scroll view component;

[0281] Different floating components in the target scroll view component have different effective floating ranges; the stacking order of each floating component and other components containing each floating component is higher than the sibling components within the effective floating range of each moving component.

[0282] The moving unit 302 is used to move the target component to be floated corresponding to any floating effective range to a preset fixed position on the current display interface for floating rendering display when the current scrolling distance is detected to be within any floating effective range.

[0283] Optionally, the current scrolling distance includes the current vertical scrolling distance; the top of the component to be suspended at a preset fixed position coincides with the top of the currently displayed interface.

[0284] Optionally, the moving unit 302 is also used for:

[0285] If the current rolling distance is detected to be greater than the maximum value of any effective floating range, the target component to be suspended corresponding to any effective floating range is fixed at the first preset position;

[0286] The distance between the top of the target floating component at the first preset position and the top of the target scroll view component is the maximum value of any floating effective range.

[0287] Optionally, the minimum value of the effective floating range is greater than or equal to the distance between the top of the initial position of the component to be floated and the top of the target scroll view component.

[0288] Optionally, the method for determining the effective suspension range includes:

[0289] Iterate through each component to be floated in the target scroll view component from top to bottom, and perform the following steps;

[0290] The distance between the top of the initial position of the currently traversed floating component and the top of the target scroll view component is determined as the minimum value of the effective floating range corresponding to the currently traversed floating component.

[0291] If the currently traversed floating component is not the last floating component, determine the distance between the top of the initial position of the next floating component and the top of the target scroll view component, and then determine the maximum value of the corresponding floating effective range as the difference between the determined distance and the height of the currently traversed floating component.

[0292] If the currently traversed component to be floated is the last component to be floated, the difference between the height of the target scroll view component and the height of the currently traversed component to be floated is determined as the maximum value of the corresponding effective floating range.

[0293] Optionally, the methods for setting the stacking order of components in the target scroll view component include:

[0294] For each sibling component in the target scroll view component, set the stacking order from top to bottom.

[0295] Optionally, the current scroll distance includes the current horizontal scroll distance; the left side of the target floating component at the preset fixed position coincides with the left side of the currently displayed interface.

[0296] Optionally, the moving unit 302 is also used for:

[0297] If the current rolling distance is detected to be greater than the minimum value of any effective floating range, the target component to be suspended corresponding to any effective floating range is determined to be in a suspended state;

[0298] When it is necessary to display a target component that is in a floating state, the rendering is performed based on the preset floating style corresponding to the target component.

[0299] Optionally, the above-mentioned device further includes:

[0300] The acquisition unit 303 is used to acquire the corresponding effective floating range that the control backend has predetermined for each floating component in the target scroll view component.

[0301] For an explanation of the above device embodiments, please refer to the above method embodiments.

[0302] This specification also provides an electronic device, including: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to execute the instructions to implement any of the above method embodiments.

[0303] This specification also provides a computer-readable storage medium, wherein when the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is able to implement any of the above-described method embodiments.

[0304] This specification also provides a computer device, which includes at least a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements a component rendering method when executing the program.

[0305] Figure 4 This diagram illustrates a more specific hardware structure of a computer device provided in an embodiment of this specification. The device may include a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, memory 1020, input / output interface 1030, and communication interface 1040 are interconnected internally via the bus 1050.

[0306] The processor 1010 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0307] The memory 1020 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program code is stored in the memory 1020 and is called and executed by the processor 1010.

[0308] The input / output interface 1030 is used to connect input / output modules to realize information input and output. Input / output modules can be configured as components within the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Input devices may include keyboards, mice, touchscreens, microphones, various sensors, etc., while output devices may include displays, speakers, vibrators, indicator lights, etc.

[0309] The communication interface 1040 is used to connect a communication module (not shown in the figure) to enable communication between this device and other devices. The communication module can communicate via wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0310] Bus 1050 includes a pathway for transmitting information between various components of the device, such as processor 1010, memory 1020, input / output interface 1030, and communication interface 1040.

[0311] It should be noted that although the above-described device only shows the processor 1010, memory 1020, input / output interface 1030, communication interface 1040, and bus 1050, in specific implementations, the device may also include other components necessary for normal operation. Furthermore, those skilled in the art will understand that the above-described device may only include the components necessary for implementing the embodiments of this specification, and not necessarily all the components shown in the figures.

[0312] This specification also provides a computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements a component rendering method.

[0313] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0314] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that the embodiments of this specification can be implemented by means of software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solutions of the embodiments of this specification, or the parts that contribute to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in various embodiments or some parts of the embodiments of this specification.

[0315] The systems, devices, modules, or units described in the above embodiments can be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer, which can take the form of a personal computer, laptop computer, cellular phone, camera phone, smartphone, personal digital assistant, media player, navigation device, email sending and receiving device, game console, tablet computer, wearable device, or any combination of these devices.

[0316] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on its differences from other embodiments. In particular, the device embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments. The device embodiments described above are merely illustrative. The modules described as separate components may or may not be physically separate. When implementing the embodiments of this specification, the functions of each module can be implemented in one or more software and / or hardware. Alternatively, some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without creative effort.

[0317] The above description is merely a specific implementation of the embodiments of this specification. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principles of the embodiments of this specification, and these improvements and modifications should also be considered as protection of the embodiments of this specification.

Claims

1. An assembly rendering method applied to a rendering front end, characterized in that, include: Detect the current scroll distance of the target scroll view component; Different floating components in the target scroll view component have different effective floating ranges; the effective floating range is defined independently of the hierarchical structure to which the floating component belongs, and each effective floating range is a continuous scrolling distance interval formed by a set minimum value and a maximum value; the stacking order of each floating component and other components containing each floating component is higher than the same-level components within the corresponding effective floating range of each floating component; When the current scroll distance is detected to be within any floating effective range, the target component to be floated corresponding to any floating effective range is moved to a preset fixed position on the current display interface for floating rendering display. The target component to be floated still belongs to the view level of the target scroll view component, so that any component to be floated in the target scroll view component can be floated rendering display by moving the component, regardless of whether the component to be floated is a direct subview of the target scroll view component. The method for determining the effective suspension range includes: Traverse each component to be floated in the target scroll view component from top to bottom, and perform the following steps; The distance between the top of the initial position of the currently traversed floating component and the top of the target scroll view component is determined as the minimum value of the effective floating range corresponding to the currently traversed floating component. If the currently traversed floating component is not the last floating component, determine the distance between the top of the initial position of the next floating component and the top of the target scroll view component, and then determine the maximum value of the corresponding floating effective range as the difference between the determined distance and the height of the currently traversed floating component. If the currently traversed component to be floated is the last component to be floated, the difference between the height of the target scroll view component and the height of the currently traversed component to be floated is determined as the maximum value of the corresponding effective floating range.

2. The method of claim 1, wherein, The current rolling distance includes, Current vertical scrolling distance; the top of the target component to be suspended at the preset fixed position coincides with the top of the currently displayed interface.

3. The method according to claim 2, characterized in that, Also includes: If the current rolling distance is detected to be greater than the maximum value of any of the effective floating ranges, the target component to be suspended corresponding to any of the effective floating ranges is fixed at a first preset position; The distance between the top of the target component to be suspended at the first preset position and the top of the target scroll view component is the maximum value of any effective suspension range.

4. The method of claim 2, wherein, The minimum value of the effective floating range is greater than or equal to the distance between the top of the initial position of the component to be suspended and the top of the target scrolling view component.

5. The method of claim 4, wherein, The method for setting the stacking order of components in the target scroll view component includes: For each sibling component in the target scroll view component, set the stacking order from top to bottom.

6. The method of claim 1, wherein, The current scrolling distance includes the current horizontal scrolling distance; the left side of the target component to be suspended at the preset fixed position coincides with the left side of the currently displayed interface.

7. The method of claim 1, wherein, Also includes: If the current rolling distance is detected to be greater than the minimum value of any effective floating range, the target component to be suspended corresponding to any effective floating range is determined to be in a suspended state; When it is necessary to display a target component that is in a floating state, the rendering is performed based on the preset floating style corresponding to the target component.

8. The method of claim 1, wherein, Also includes: The control backend obtains the pre-determined effective floating range for each component to be floated in the target scrolling view component.

9. An assembly rendering device, applied to a rendering front end, characterized in that, include: The detection unit is used to detect the current scroll distance of the target scroll view component; Different floating components in the target scroll view component have different effective floating ranges; the effective floating range is defined independently of the hierarchical structure to which the floating component belongs, and each effective floating range is a continuous scrolling distance interval formed by a set minimum value and a maximum value; the stacking order of each floating component and other components containing each floating component is higher than the same-level components within the corresponding effective floating range of each floating component; The moving unit is used to move the target component to be suspended corresponding to any floating effective range to a preset fixed position on the current display interface for floating rendering display when the current scroll distance is detected to be within any floating effective range. The target component to be suspended still belongs to the view level of the target scroll view component, so that any component to be suspended at any level in the target scroll view component can be floating rendered display by moving the component, regardless of whether the component to be suspended is a direct subview of the target scroll view component. The method for determining the effective suspension range includes: Traverse each component to be floated in the target scroll view component from top to bottom, and perform the following steps; The distance between the top of the initial position of the currently traversed floating component and the top of the target scroll view component is determined as the minimum value of the effective floating range corresponding to the currently traversed floating component. If the currently traversed floating component is not the last floating component, determine the distance between the top of the initial position of the next floating component and the top of the target scroll view component, and then determine the maximum value of the corresponding floating effective range as the difference between the determined distance and the height of the currently traversed floating component. If the currently traversed component to be floated is the last component to be floated, the difference between the height of the target scroll view component and the height of the currently traversed component to be floated is determined as the maximum value of the corresponding effective floating range.

10. The apparatus of claim 9, wherein, The current rolling distance includes, Current vertical scrolling distance; the top of the component to be suspended at the preset fixed position coincides with the top of the currently displayed interface.

11. The apparatus of claim 9, wherein, Also includes: The acquisition unit is used to acquire the corresponding effective floating range that the control backend has predetermined for each component to be suspended in the target scrolling view component.

12. An electronic device, comprising: include: processor; Memory used to store the processor's executable instructions; The processor is configured to execute the instructions to implement the method as described in any one of claims 1 to 8.

13. A computer-readable storage medium, characterized in that, When the instructions in the computer-readable storage medium are executed by the processor of the electronic device, the electronic device is able to implement the method as described in any one of claims 1 to 8.

Images