Long interface rendering method, application interface display method and electronic device

Abstract

A long interface rendering method, an application interface display method and an electronic device, used for improving the performance of electronic devices, reducing the probability of frame drop of electronic devices and reducing the possibility of displaying white blocks. In the method, a long interface is divided into multiple display blocks, when a user performs a swipe operation on the long interface to switch the display of different interfaces, a target display block which can display a window interface can be determined; moreover, the height of the divided display blocks is greater than the height of the display window, and the spacing between adjacent display blocks is set to be less than the height of the display window, thus allowing for overlapping areas between adjacent display blocks, the heights of the overlapping areas being greater than the height of the display window. Thus, within a certain buffer area, clipping can be performed on the basis of the rendered target display block, so as to obtain a multi-frame-display window interface, thus eliminating the need to recalculate and re-render for each frame an area to be rendered.

Description

Long interface rendering method, application interface display method and electronic device

[0001] CROSS-REFERENCE TO RELATED APPLICATIONS

[0002] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office of the People's Republic of China on February 27, 2024, with application number 202410216839.2 and invention name "A method for rendering a long interface, a method for displaying an application interface, and an electronic device", the entire contents of which are incorporated by reference into this application. Technical Field

[0003] The present application relates to the field of terminal technology, and in particular to a method for rendering a long interface, a method for displaying an application interface, and an electronic device. Background Art

[0004] The user interface is an important part of the design elements of a website or application, and can present a variety of information to users. In some user interfaces, in addition to including fixed information displayed by native components, it can also typically include a web interface displayed by a web component. Among them, a web interface is generally constructed using scrollable components. In this way, a user interface including a web interface can be constructed using a sliding operation to form a long interface that exceeds the height of the display window of the electronic device.

[0005] For some long interface display scenarios, the user interface is rendered in multiple passes. As the user slides, the area to be rendered is constantly updated, causing the electronic device to constantly recalculate and render the area to be rendered, resulting in significant performance loss. Even when sliding quickly, untimely calculations may cause frame drops and display issues such as white blocks.

[0006] Summary of the Invention

[0007] The present application provides a method for rendering a long interface, a method for displaying an application interface, and an electronic device, so as to improve the performance of the electronic device, reduce the probability of frame loss in the electronic device, and reduce the possibility of displaying white blocks.

[0008] In the first aspect, the present application provides a method for rendering a long interface, which can be applied to electronic devices. In this method, in response to a sliding operation on the long interface, a target display block adjacent to the original display block is determined; wherein the original display block is the display block selected before the sliding operation is detected; the original display block and the target display block are both obtained based on the division of the long interface, the interval between the original display block and the target display block is less than the height of the display window, and the height of the original display block and the target display block is greater than the height of the display window; the target display block is rendered; in response to the sliding operation, the rendered target display block is cropped frame by frame based on the display window to obtain a multi-frame target window interface and displayed frame by frame.

[0009] In this method, the target display block can be determined by pre-dividing the long interface into blocks, and combining the corresponding relationship between the sliding offset of the sliding operation and the display block. In this way, the electronic device can render the target display block, and there is a certain interval and overlapping area between adjacent display blocks, so that within a certain buffer area, the electronic device can be cropped based on the same display block, thereby obtaining a multi-frame interface corresponding to the target display window, without the need to recalculate the area to be rendered and re-render the area to be rendered frame by frame. Therefore, this method can improve the performance of electronic devices, reduce the probability of frame loss of electronic devices, and reduce the possibility of displaying white blocks.

[0010] In some implementations, determining a target display block adjacent to an original display block in response to a sliding operation on the long interface includes: determining a sliding offset value corresponding to the sliding operation; and determining that the target display block is the original display block when the sliding offset value does not exceed a preset pixel value of the original display block in the sliding direction; wherein, when the sliding offset value exceeds a preset pixel value of the original display block in the sliding direction, determining that the next display block adjacent to the original display block in the sliding direction is selected as the target display block. For example, the sliding direction can be a sliding or scrolling direction of the long interface.

[0011] In this implementation, by determining the positional relationship of the target window interface relative to the original display block based on the sliding offset value, in a scenario where the original display block may not be able to fully display the target window interface, it is possible to switch to displaying the target window interface based on the next adjacent target display block. In this way, through the correspondence between the sliding operation and the display block, the electronic device can be cropped based on the same display block, thereby obtaining a multi-frame interface corresponding to the target display window, without the need to recalculate the area to be rendered and re-render the area to be rendered frame by frame. Therefore, this method can improve the performance of electronic devices, reduce the probability of frame loss in electronic devices, and reduce the possibility of displaying white blocks.

[0012] In some implementations, the preset pixel value is a pixel value at a middle position of the original display block.

[0013] In this implementation, the center of the original display block can be used as a dividing line to determine whether the original display block can fully display the target window interface. This allows the electronic device to crop based on the same display block, thereby obtaining multiple frames corresponding to the target display window, without having to recalculate and re-render the to-be-rendered area frame by frame. Therefore, this method can improve the performance of electronic devices, reduce the probability of frame drop, and reduce the possibility of white blocks being displayed.

[0014] In some implementations, before determining the target display block adjacent to the original display block, the method further includes: obtaining N display blocks and a tail display block in sequence according to the height of the long interface, the first preset height of the display block, and the preset interval between the display blocks, wherein the tail display block is the last display block obtained by division; N is a positive integer; wherein the height of the N display blocks is equal to the first preset height; and the height of the tail display block is less than or equal to the first preset height.

[0015] In this implementation, since there is arbitrariness in the height of the long interface, when dividing the long interface into display blocks, the accuracy of the division result can be ensured by performing different processing on the tail display block.

[0016] In some implementations, before determining the target display block adjacent to the original display block, the method further includes: obtaining a head display block, N-1 display blocks and a tail display block in sequence according to the height of the long interface, the second preset height of the head display block, the second preset height of the display block and the preset interval between the display blocks, the head display block being the first display block obtained by division, and the tail display block being the last display block obtained by division; N is a positive integer; wherein the height of the head display block is equal to the second preset height, and the second preset height is less than the first preset height; the height of the N-1 display blocks is equal to the first preset height; and the height of the tail display block is less than or equal to the first preset height.

[0017] In this implementation, based on the application scenarios of some applications, the frequency of viewing the following content of the long interface is less, while the frequency of viewing and using fixed information is more. Therefore, the height of the head display block adjacent to the fixed block can be set to be smaller than the size of other display blocks, thereby balancing performance loss and frame loss problems and reducing power consumption.

[0018] In some implementations, the height of the display block is a preset multiple of the height of the display window, and the preset multiple is greater than 1; or, the height of the display block is a predefined height, and the predefined height is greater than the height of the display window.

[0019] In some implementations, the display window is a full-screen window of the electronic device, or an application window, or a non-full-screen window.

[0020] In some implementations, the sliding direction includes sliding up and sliding down.

[0021] In a second aspect, the present application also provides a method for displaying an application interface, which can be applied to an electronic device. The method provided in the second aspect may include: displaying a first interface of an application, the first interface including a functional component and a web component, the web component including a first web page, the first web page being cropped based on a rendered first display block; in response to a first sliding operation on the first interface, cropping the first display block to obtain a second web page; and displaying a second interface including the second web page. The functional component can be used to display some functional information included in the application interface. For example, the functional component can be a native component that can be used to display some fixed information, such as fixed controls.

[0022] In some implementations, the display area displayed by the functional component may also be obtained by cropping based on the rendered first display block.

[0023] In some implementations, the method further includes: rendering a second display block in response to a second sliding operation on the first interface;

[0024] The second display block is cropped to obtain a third web page; and a third interface including the third web page is displayed.

[0025] In some implementations, the method further includes: in response to a third sliding operation on the first interface, cropping the second display block to obtain a fourth web page; and displaying a fourth interface including the fourth web page.

[0026] In some implementations, the first display block overlaps with the second display block, and a height of the overlap is greater than a height of the first interface.

[0027] In a third aspect, the present application also provides an electronic device, comprising: at least one memory and at least one processor; wherein the at least one memory is used to store computer program code, and the computer program code includes computer instructions; when the computer instructions are executed by at least one processor, the electronic device executes the method in the above-mentioned first aspect and any one of the implementations of the first aspect, or executes the method in the above-mentioned second aspect and any one of the implementations of the first aspect.

[0028] In a fourth aspect, the present application further provides a long interface rendering device, which includes modules / units that execute the method in the first aspect and any implementation of the first aspect. These modules / units can be implemented by hardware, or the corresponding software implementation can be executed by hardware.

[0029] In a fifth aspect, the present application further provides a device for displaying an application interface, the device comprising modules / units for executing the method in the second aspect and any one of the implementations of the second aspect. These modules / units may be implemented in hardware, or the corresponding software implementation may be executed in hardware.

[0030] In the sixth aspect, a computer-readable storage medium is provided, which stores a computer program (also referred to as code, or instructions). When these codes or instructions are run on a computer, the computer executes the method in the above-mentioned first aspect and any one of the implementations of the first aspect, or executes the method in the above-mentioned second aspect and any one of the implementations of the second aspect.

[0031] In the seventh aspect, a computer program product is provided, which includes: a computer program (also referred to as code, or instructions), which, when run, causes the method in the above-mentioned first aspect and any one of the implementations of the first aspect to be executed, or causes the method in the above-mentioned second aspect and any one of the implementations of the second aspect to be executed.

[0032] In the eighth aspect, a graphical user interface on an electronic device is also provided, which electronic device has a display screen, one or more memories, and one or more processors, and the one or more processors are used to execute one or more computer programs stored in the one or more memories. The graphical user interface may include the graphical user interface displayed when the electronic device executes the above-mentioned first aspect of the present application and any implementation method in the first aspect, or may also include the graphical user interface displayed when the electronic device executes the above-mentioned second aspect of the present application and any implementation method in the second aspect.

[0033] It should be noted that for the beneficial effects of the electronic device provided in various scenarios from the second to the eighth aspects of this application, please refer to the beneficial effects of any implementation method in the above-mentioned first aspect, and no further details will be given here. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1a is a schematic diagram of a long interface;

[0035] FIG1b is a rendering diagram of a rendering method for a long interface;

[0036] FIG2 shows a schematic diagram of the hardware structure of a possible electronic device;

[0037] FIG3 is a block diagram of a software system architecture of an electronic device provided in an embodiment of the present application;

[0038] FIG4 is a schematic diagram of a flow chart of a method for rendering a long interface provided in an embodiment of the present application;

[0039] FIG5 is a schematic diagram of a division result provided in an embodiment of the present application;

[0040] FIG6 is another schematic diagram of a division result provided in an embodiment of the present application;

[0041] FIG7 is another schematic diagram of a division result provided in an embodiment of the present application;

[0042] FIG8 is a schematic diagram of selecting a target display block according to an embodiment of the present application;

[0043] FIG9 is a schematic diagram of selecting a target display block according to an embodiment of the present application;

[0044] FIG10 is a flow chart of a method for displaying an application interface according to an embodiment of the present application;

[0045] FIG11 is a second flow chart of a method for displaying an application interface provided in an embodiment of the present application;

[0046] FIG12 is a third flow chart of a method for displaying an application interface provided in an embodiment of the present application. DETAILED DESCRIPTION

[0047] The embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0048] The embodiments of the present application can be applied to the field of terminal technology, and specifically can be applied to the scenario of displaying a long interface on an electronic device. Among them, the long interface can usually be constructed using scrollable components, so that more information can be displayed.

[0049] For example, Figure 1a is a schematic diagram of a long interface. As shown in interface 101 in Figure 1a, the display window of the electronic device can display a partial interface area of ​​the long interface; wherein, the height of the display window can be determined according to the size of the screen, for example, it can be 2700 pixels (px). As shown in interface 102 in Figure 1b, a complete long interface is displayed, and the height of the long interface is greater than the height of the display window, for example, it can be 9000px. Optionally, the long interface can be, for example, a web page developed based on hypertext markup language (HTML) 5 technology (also referred to as an "H5 interface"), which can be constructed by native components and web components. Exemplarily, native components can be used to construct a fixed display interface in the H5 interface, such as components 1 to 8 shown in interface 101 or interface 102, and web components can be used to construct a web interface in the H5 interface, for example, the web interface shown in interface 102 can include content 1 to content 5.

[0050] Based on the hardware limitations of electronic devices, electronic devices have a maximum rendering height, for example, the maximum rendering height can be 8096px. For some scenarios where the height of a long interface exceeds the maximum rendering height, the electronic device cannot meet the requirements of drawing the long interface through one rendering, so a local drawing method is usually adopted. In an optional implementation method, Figure 1b is a rendering schematic diagram of a rendering method for a long interface. In combination with the interface 101 and the interface 102 shown in Figure 1a, it can be seen that on the electronic device, only the partial interface area of ​​the long interface that is consistent with the size of the display window can be displayed. Based on this, the local drawing area shown in the interface 103 shown in Figure 1b can be an area larger than the display window, and the position of the local drawing area can be determined in response to the area that the display window needs to display, for example, the local drawing area can be vertically centered with respect to the display window.

[0051] When sliding an H5 interface, the electronic device will synchronously update the local drawing area based on the position of the display window within the H5 interface. Therefore, during the sliding process, the local drawing area is constantly recalculated and rendered, and then cropped based on the size of the display window. This places high demands on the electronic device's computing power and results in significant performance loss. Even when sliding quickly, frame drops and white blocks may occur due to untimely calculations.

[0052] In light of this, embodiments of the present application provide a method for rendering a long interface, a method for displaying an application interface, and an electronic device. In this method, the long interface is pre-divided into multiple display blocks. The electronic device selects a target display block in response to the slide offset indicated by the slide operation. The electronic device then displays the application interface based on the rendered target display block. This method can reduce performance loss in the electronic device, reduce the probability of frame drop, and reduce the likelihood of displaying white blocks.

[0053] The technical solutions in the embodiments of the present application can be applied to electronic devices, which can be electronic devices that can display interfaces, such as mobile phones, tablet computers, handwriting tablets, wearable devices (e.g., watches, bracelets, etc.), vehicle-mounted devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), smart home devices (e.g., smart TVs, smart speakers with display screens, etc.). It will be understood that the embodiments of the present application do not impose any restrictions on the specific types of electronic devices.

[0054] The electronic devices to which the embodiments of the present application can be applied include, but are not limited to, Or electronic devices with other operating systems. The electronic device may also be other electronic devices, such as a laptop computer with a touch-sensitive surface (eg, a touch panel).

[0055] Figure 2 shows a schematic diagram of the hardware structure of a possible electronic device. As shown in Figure 2, electronic device 200 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display 194, and a subscriber identification module (SIM) card interface 195. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0056] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors. The controller may serve as the nerve center and command center of the electronic device 200. The controller may generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution. The processor 110 may also include memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a high-speed cache memory. This memory may store instructions or data that have just been used or are being recycled by the processor 110. When the processor 110 needs to use the instruction or data again, it can directly retrieve it from the memory. This avoids duplicate accesses, reduces the processor 110's waiting time, and thus improves system efficiency. In the embodiment of the present application, the processor 110 may be configured to divide a long interface into multiple display blocks, may be configured to select a target display block from the multiple display blocks in response to a sliding offset indicated by a sliding operation, and may be configured to determine the display content of a display window based on the target display block and display the content via the display screen 194. In the embodiment of the present application, the GPU included in the processor 110 may be used to render the target display block.

[0057] The display screen 194 is used to display the display interface of the application, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light emitting diode or an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light emitting diode (QLED), etc. In some embodiments, the electronic device 200 may include 1 or N display screens 194, where N is a positive integer greater than 1. In an embodiment of the present application, the display screen 194 can be used to display the interface of the display window after being processed by the method provided in the embodiment of the present application, such as the interfaces shown in Figures 4 to 9 in the following embodiments.

[0058] The camera 193 is used to capture still images or videos. The camera 193 may include a front camera and a rear camera.

[0059] The internal memory 121 can be used to store computer executable program code, and the executable program code includes instructions. The processor 110 executes various functional applications and data processing of the electronic device 200 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, and the software code of at least one application, etc. The data storage area can store data (such as images, videos, etc.) generated during the use of the electronic device 200. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc. In an embodiment of the present application, the internal memory 121 may, for example, store program instructions for implementing the rendering method of the long interface provided by the present application, the division rules for dividing the long interface into multiple display blocks, the correspondence between the sliding offset and the target display block, etc. The present application does not limit the content stored in the internal memory 121.

[0060] The touch sensor 180K and the display screen 194 form a touch screen, also known as a "touch screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor 180K can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the electronic device 200, which is different from the position of the display screen 194. In an embodiment of the present application, the touch sensor 180K can collect user operations on the interface based on the interface corresponding to the application window displayed by the electronic device through the display screen 194. For example, user operations may include but are not limited to: upward sliding operations, downward sliding operations, etc.

[0061] It is understood that the components shown in FIG2 do not constitute a specific limitation on the mobile phone. The mobile phone may include more or fewer components than shown, or combine or separate some components, or arrange the components differently. In the following embodiments, the electronic device 200 shown in FIG2 is used as an example for description.

[0062] The operating system (OS) involved in the embodiments of the present application is the most basic system software running on the electronic device 200. The software system of the electronic device 200 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiments of the present application use an operating system with a layered architecture as an example to illustrate the software system architecture of the electronic device 200.

[0063] Figure 3 is a block diagram of the software system architecture of an electronic device provided in an embodiment of the present application. As shown in Figure 3, the software system architecture of the electronic device can be a layered architecture. For example, the software can be divided into several layers, each with a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the operating system is divided into five layers, from top to bottom, namely, the application layer, the application framework layer (framework, FWK), the runtime and system library, the kernel layer, and the hardware layer.

[0064] The application layer can include a series of application packages. As shown in Figure 3, the application layer can include camera, settings, skin modules, user interface (UI), third-party applications, etc. Among them, third-party applications can include wireless local area network (WLAN), music, calls, Bluetooth, video, memo, notes, etc.

[0065] In one possible implementation, an application can be developed using the Java language and completed by calling the application programming interface (API) provided by the application framework layer. Developers can interact with the underlying layer of the operating system (such as the hardware layer, kernel layer, etc.) through the application framework layer to develop their own applications. The application framework layer is mainly a series of services and management systems for the operating system. In an embodiment of the present application, the electronic device can detect a user's sliding operation in an application that can display a long interface included in the application layer, and call the API provided by the application framework layer in response to the sliding operation.

[0066] The application framework layer provides an application programming interface and programming framework for applications in the application layer. The application framework layer includes some predefined functions. As shown in Figure 3, the application framework layer can include an activity manager, a window manager, a content provider, a view system, a telephony manager, a resource manager, a notification manager, and so on.

[0067] The activity manager is used to manage the life cycle of each application and provide common navigation back functions, providing an interactive interface for all program windows.

[0068] The window manager manages windowed applications. It can determine the display size, determine whether a status bar is present, lock the screen, take screenshots, and more. Content providers store and retrieve data and make it accessible to applications. This data can include video, images, audio, incoming and outgoing calls, browsing history and bookmarks, and the phone book.

[0069] The view system includes visual components, such as components for displaying text and components for displaying images. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images. In embodiments of the present application, the view system can include native components as well as web components. For example, web components can be combined with various visual components. For example, as shown in interface 102 in Figure 1a, a web component can be used to display a web interface that can include multiple display contents. Furthermore, web components that extend beyond the display window can be nested within a scrolling component, thereby enabling nested web scrolling scenarios, whereby a long interface can be displayed through a sliding operation. Optionally, the height of the web component can be set to match the settings of the web interface, thereby hiding the scroll bar. Alternatively, if the height of the web component is smaller than the web interface, a scroll bar can be used to indicate the current display position of the web interface. Alternatively, when a long interface includes other interfaces, such as a fixed display interface of a native component in addition to the web interface, a scroll bar can also be used to indicate the current display position of the long interface.

[0070] In the embodiment of the present application, in response to a sliding operation, the view system included in the application framework layer can be called to calculate the target display block to be drawn. It should be understood that in response to the sliding operation, functions included in the application framework layer, such as the resource manager, can also be called to obtain display data corresponding to the target display block.

[0071] After the target display area to be drawn is calculated, it can be sent to the system library to render the interface to be displayed.

[0072] The phone manager is used to provide communication functions for electronic devices, such as call status management (including answering, hanging up, etc.).

[0073] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0074] The Notification Manager allows applications to display notifications in the status bar. These messages can be displayed briefly and then disappear automatically without user interaction. For example, the Notification Manager is used to notify users of completed downloads and message reminders. The Notification Manager can also display notifications in the top status bar of the system as icons or scrolling text, such as notifications from background applications, or as dialog windows on the screen. Examples include text messages in the status bar, beeps, vibrations on electronic devices, and flashing indicator lights.

[0075] The runtime includes the core library and the virtual machine. The runtime is responsible for the scheduling and management of the operating system.

[0076] The core library consists of two parts: one containing callable functions and the other the operating system's core library. The application layer and application framework layer run in a virtual machine. The virtual machine manages object lifecycles, stack management, thread management, security and exception management, and garbage collection.

[0077] The system library can include multiple functional modules, such as surface manager, media framework, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0078] The surface manager is used to manage the display subsystem and provide the fusion of two-dimensional and three-dimensional layers for multiple applications.

[0079] The media framework supports playback and recording of a variety of common audio and video formats, as well as static image files. The media framework can support a variety of audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0080] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0081] The two-dimensional graphics engine is a drawing engine for two-dimensional drawing. For example, when the target display block is a two-dimensional drawing, the two-dimensional graphics engine can perform rendering and other processing.

[0082] In some embodiments, a three-dimensional graphics processing library may be used to draw a three-dimensional motion trajectory image, and a two-dimensional graphics engine may be used to draw a two-dimensional motion trajectory image.

[0083] The kernel layer is the layer between hardware and software. The kernel layer includes at least a display driver, a camera driver, an audio driver, and a sensor driver. In the embodiment of the present application, the kernel layer can receive the rendered interface to be displayed and send it for display by calling the display driver, that is, displaying it on the display screen 194. It should be understood that the interface to be displayed is obtained by cropping based on the rendered target block and the display window of the electronic device.

[0084] The hardware layer can include various sensors, such as accelerometers, gravity sensors, touch sensors, etc.

[0085] Typically, the electronic device 200 can run multiple applications simultaneously. In simpler cases, one application corresponds to one process, while in more complex cases, one application corresponds to multiple processes. Each process has a process ID.

[0086] It should be understood that in the embodiments of the present application, "at least one of the following" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can represent: a, b, c, a and b, a and c, b and c, or a, b and c, where a, b, c can be single or multiple. "Multiple" refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the previous and subsequent associated objects are in an "or" relationship.

[0087] In addition, it should be understood that, in the description of this application, words such as "first" and "second" are only used for the purpose of distinguishing the description, and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying order.

[0088] It should be understood that the hardware structure of the electronic device can be as shown in Figure 2, and the software system architecture can be as shown in Figure 3, wherein the software programs and / or modules corresponding to the software system architecture in the electronic device can be stored in the internal memory 121, and the processor 110 can run the software programs and applications stored in the internal memory 121 to execute the process of a long interface rendering method provided in an embodiment of the present application.

[0089] In order to facilitate understanding of the rendering method of the long interface provided by this application, the implementation process of the method provided by this application is introduced below in combination with the contents shown in Figures 4 to 9.

[0090] The embodiments of the present application are applicable to scenarios where long interfaces are displayed on electronic devices. For example, when the electronic device is a mobile phone, the long interface can be, for example, the homepage browsing interface of some application, or a web interface available within some application; when the electronic device is a computer, the long interface can be, for example, the web interface of a browser. The embodiments of the present application are not limited to specific scenarios for long interfaces and can be used in scenarios where long interfaces are displayed on electronic devices.

[0091] FIG4 is a flow chart of a method for rendering a long interface provided by an embodiment of the present application. The flow may include the following steps:

[0092] Step 401: Divide the target long interface into a plurality of display blocks, wherein the height of the display blocks is greater than the height of the display window of the electronic device.

[0093] In one possible scenario, when the electronic device detects a viewing operation on the target long interface for the first time, or detects that there is no display block division result in the storage, multiple display blocks can be obtained by executing step 401, and the division results of multiple display blocks can be stored. In this scenario, when the electronic device detects a viewing operation on the target long interface again, the stored division results can be called without the need to perform the division process again. For example, after an application is installed on a mobile phone, when the mobile phone detects the operation of opening the application for the first time, the home page interface of the application is divided to obtain multiple display blocks, and the division results are stored; when the mobile phone detects the operation of opening the application again, the stored division results can be directly called without the need to divide the home page interface of the application again.

[0094] Optionally, the classification results may be associated based on application information, such as the application name, code, or logo. Alternatively, when the long interface is a web interface, the classification results may be associated based on a web identifier, such as a web URL.

[0095] It should be understood that when the electronic device detects a change in the height of the target long interface, or a change in the height of the display window, or other execution conditions, step 401 can be re-executed to obtain a recalculated division result. For example, when a user uses a split-screen scenario on an electronic device, step 401 can be re-executed. Alternatively, when the electronic device returns to the main interface from a secondary interface, step 401 can also be re-executed; the secondary interface can be a new interface to which the main interface jumps.

[0096] It should also be understood that in this scenario, step 401 included in the process shown in Figure 4 does not need to be executed every time, and can be executed when the execution conditions are met; wherein, the execution conditions may include but are not limited to: the first viewing operation, the division result is not stored in the storage, the height of the target long interface changes, the height of the display window changes, etc.

[0097] In another possible scenario, the electronic device may also execute step 401 each time in response to an operation for displaying the target long interface. In this scenario, no storage space is required. Furthermore, by dividing the currently open long interface into display blocks each time, the accuracy of the division results can be guaranteed, thereby improving the accuracy of the displayed interface.

[0098] In the embodiment of the present application, multiple possible division methods are provided, including but not limited to the following methods:

[0099] Method A: Except for the tail display block, the height of each display block is the same; and the intervals between the display blocks are the same.

[0100] Among them, the height of the display block meets the preset height condition, and the preset height condition is greater than the height of the display window of the electronic device and less than the height of the long interface. Exemplarily, the height of the display block can be within a preset multiple range of the height of the display window, such as 1.5 times to 2.5 times, etc. Another exemplary embodiment, the height of the display block can also be within a preset pixel value range of the height of the display window, such as 4000px to 800px, etc. Another exemplary embodiment, the height of the display block can also be any value that meets the preset height condition. For example, taking the display window of 2700px as an example, the height of the display block can be, for example, 5000px, 5400px, 6000px, 7000px, 8000px, etc. This application does not limit the specific value of the height of the display block.

[0101] The intervals between the display blocks meet a preset interval condition, which is smaller than the height of the display window. For example, the intervals between the display blocks can be any value smaller than 2700px, with 1000px used as an example in the following embodiments. It should be understood that smaller intervals result in more display blocks, while larger intervals result in fewer display blocks.

[0102] Optionally, the height of the display window may be the height of the screen of the electronic device.

[0103] Alternatively, the height of the display window may be the height of the display window corresponding to the application, for example, smaller than the height of the screen.

[0104] Alternatively, the height of the display window may be the height of the display window corresponding to non-full-screen scenarios such as split screen and pop-up windows.

[0105] For example, Figure 5 is a schematic diagram of a division result provided in an embodiment of the present application. As shown in 500 in Figure 5, it is a schematic diagram of a display window, taking the height of the display window as 2700px as an example. As shown in 501 in Figure 5, taking the height of the long interface as 9000px as an example, the long interface can be divided into 4 display blocks in sequence, such as display block 1 shown by 5021 in Figure 5, display block 2 shown by 5022, display block 3 shown by 5023, and display block 4 shown by 5024. As shown in 5021 to 5024 in Figure 5, the height of each display block is the same, which is 6000px; the intervals between the display blocks are the same, which is 1000px.

[0106] For example, Figure 6 is another schematic diagram of a division result provided in an embodiment of the present application. As shown in 600 in Figure 6, it is a schematic diagram of a display window, and the height of the display window is still taken as 2700px as an example. As shown in 601 in Figure 6, the height of the long interface is still taken as 9000px as an example. In combination with Figure 1a, the long interface includes a fixed display interface constructed by native components and a web interface constructed by web components. The fixed display interface usually remains unchanged, and the web interface may change. Therefore, the long interface can be divided into fixed blocks and 4 display blocks in sequence, such as the fixed block shown in 6020 in Figure 6, display block 1 shown in 6021, display block 2 shown in 6022, display block 3 shown in 6023, and display block 4 shown in 6024. As shown in 6020 in Figure 6, the height of the fixed block is 600px. As shown in 6021 to 6024 in Figure 6, display blocks 1 to 3 have the same height of 6000 px, while display block 4, as the tail display block of the long interface, has a height of 5400 px. Furthermore, the intervals between display blocks are the same, all 1000 px. It should be understood that when dividing a long interface, the tail display block can be obtained based on the height of the long interface, the number of display blocks, and the intervals between display blocks.

[0107] For example, if the height of the display block is 8000px, the interval of the display block is 1000px, the height of the long interface 1 is 9000px, the height of the long interface 2 is 9010px, and the height of the long interface 3 is 10010px, the division results may be shown in the following Table 1:

[0108] Table 1

[0109] As can be seen from Table 1, as the length of a long interface increases, it can be divided into more display blocks. For example, long interface 1 can be divided into 2 display blocks, long interface 2 can be divided into 3 display blocks, and long interface 4 can be divided into 4 display blocks. In addition, the height of the tail display block can be determined based on the spacing between display blocks and the height of the remaining area after the display blocks are divided. For example, after long interface 1 is divided into display block 1, the height of the remaining area at a position 1000px away from display block 1 can be divided into display block 2 with a height of 8000px; and after long interface 2 is divided into display block 1 and display block 2, the height of the remaining area at a position 1000px away from display block 2 can be divided into display block 3 with a height of 7010px; and after long interface 3 is divided into display blocks 1 to 3, the height of the remaining area at a position 1000px away from display block 3 can be divided into display block 2 with a height of 7990px.

[0110] Method B: Except for the tail display block, the heights of each display block are not exactly the same; the intervals between the display blocks are the same.

[0111] For example, Figure 7 is another schematic diagram of a division result provided in an embodiment of the present application. As shown in 700 in Figure 7, it is a schematic diagram of a display window, and the height of the display window is still taken as 2700px as an example. As shown in 701 in Figure 7, the height of the long interface is still taken as 9000px as an example. In combination with Figure 1a, the long interface includes a fixed display interface constructed by native components and a web interface constructed by web components. The fixed display interface usually remains unchanged, and the web interface may change. Therefore, the long interface can be divided into a fixed block and 4 display blocks, such as the fixed block shown in 7020 in Figure 7, the display block 1 shown in 7021, the display block 2 shown in 7022, the display block 3 shown in 7023, and the display block 4 shown in 7024. As shown in 7020 to 7024 in Figure 7, the sum of the heights of display block 1 and the fixed block can be 6000px, which can also be understood as the height of the fixed block is 600px, the height of display block 1 is 5400px, and the heights of display blocks 2 to 4 are the same, all 6000px; and the intervals between display blocks are the same, all 1000px, where the starting position of display block 2 is calculated from the starting position of the fixed block. Among them, the fixed block and display block 1 can be rendered together. In this example, based on the application scenarios of some applications, the frequency of viewing the following content of the long interface is less, while the frequency of viewing and using fixed information is more. Therefore, the height of display block 1 adjacent to the fixed block can be set to be smaller than the size of other display blocks, so as to balance the performance loss and frame loss problems and reduce power consumption.

[0112] In another example, in a scenario where fixed components and web components are not distinguished, or in a scenario where fixed components are not included, the electronic device may also divide the long interface so that the height of the first display block is smaller than the height of other display blocks. Exemplarily, the height of the first display block may be greater than the height of the display window of the electronic device and smaller than the height of other display blocks; for example, 1.2 to 1.5 times the height of the display window, or 3000px to 4000px. In another example, the sum of the height of the first display block and the height of the fixed block may be greater than the height of the display window of the electronic device and smaller than the height of other display blocks. In this way, by setting the height of the first display block to be different from the height of other display blocks, performance loss and frame loss problems can be balanced.

[0113] In other possible division methods, the intervals between display blocks may also be different; alternatively, the display blocks may be divided according to the scenario where the height of the long interface, the height of the display blocks meets the preset height condition, and the intervals between the display blocks meet the preset interval condition. In this scenario, the tail display block may not be treated differently.

[0114] Step 402: In response to a sliding operation on a target long interface, select a target display block from a plurality of display blocks.

[0115] In an embodiment of the present application, in response to a sliding operation on a target long interface, a sliding offset value is determined; then, based on the sliding offset value, a target display block is selected from a plurality of display blocks. Optionally, the sliding offset value can be determined based on the sliding offset and the position of the display interface before the sliding operation.

[0116] In an optional embodiment, in the sliding direction, when the sliding offset value does not exceed the preset pixel value of the currently selected display block, the current display block can be kept selected; when the sliding offset value exceeds the preset pixel value of the currently selected display block, the next adjacent display block can be selected. It should be understood that the currently selected display block can also be called the original display block, which can be understood as the target display block selected historically; for example, before the electronic device detects the sliding operation, the currently selected display block can be the first display block included in the long interface; for example, the target display block determined by the electronic device in response to the last sliding operation. Exemplarily, the preset pixel value can be, for example, the pixel value in the middle position of the display block, or it can also be the pixel value at any position near the middle position, and this application does not limit this.

[0117] For example, FIG8 is a schematic diagram of selecting a target display block provided by an embodiment of the present application. Taking the display block division result introduced in FIG5 and the preset pixel value as the pixel value in the middle position of the display block as an example, in the scenario where the sliding operation is sliding downward, when the sliding offset value is {0, 3000}, the selected target display block is display block 1; when the sliding offset value is {3000, 4000}, the selected target display block is display block 2; when the sliding offset value is {4000, 5000}, the selected target display block is display block 3; and when the sliding offset value is {5000, 9000}, the selected target display block is display block 4.

[0118] For another example, Figure 9 is a schematic diagram of selecting a target display block provided by an embodiment of the present application. Still taking the display block division result introduced in Figure 5 and the preset pixel value as the pixel value in the middle position of the display block as an example, in the scenario where the sliding operation is an upward sliding, when the sliding offset value is {9000, 6000}, the selected target display block is display block 4; when the sliding offset value is {6000, 5000}, the selected target display block is display block 3; when the sliding offset value is {5000, 4000}, the selected target display block is display block 2; and when the sliding offset value is {4000, 0}, the selected target display block is display block 1.

[0119] Step 403: Render the target display block.

[0120] Exemplarily, rendering can be achieved through a CPU and / or a GPU, and this application does not describe the specific rendering method in detail.

[0121] Step 404 : In response to the sliding operation, the rendered target display block is cropped frame by frame based on the display window to obtain a multi-frame target window interface, and the target window interface is displayed frame by frame.

[0122] Based on the fact that the height of the display block is greater than the height of the display window, after obtaining the rendered target display block, cropping can be performed based on the target display block to obtain the target window interface.

[0123] It should be understood that the display interface of an electronic device is generally displayed through image frames. During the sliding process, different contents can be displayed through multiple different image frames; wherein, the multi-frame window interface is obtained by cropping based on the target display block. Therefore, through the method provided in the embodiment of the present application, within a certain buffer area, the display is performed based on the same rendered target block, thereby reducing performance loss. As shown in Figure 8, the buffer area corresponding to display block 1 is {0, 3000}, and the buffer area corresponding to display block 2 is {3000, 4000}, etc. As shown in Figure 9, the buffer area corresponding to display block 1 is {4000, 0}, and the buffer area corresponding to display block 2 is {5000, 4000}, etc. It can also be understood that based on the correspondence between the sliding offset value range and the selected display block shown in Figures 8 and 9, the sliding offset value range can be used as the buffer area corresponding to the display block.

[0124] The following test results are combined to more accurately illustrate the improvement of system performance by using a long interface rendering method provided by this application, which is explained in conjunction with Table 2 as follows:

[0125] Table 2

[0126] According to Table 2 above, compared with the long interface rendering method provided in FIG1b , the method provided in the embodiment of the present application can reduce the performance loss of the CPU and GPU.

[0127] Through the method provided in the embodiment of the present application, the target long interface is pre-divided into blocks, and the target display blocks can be determined by combining the corresponding relationship between the sliding offset of the sliding operation and the blocks. In this way, the electronic device can render the target display blocks, and there are certain intervals and overlapping areas between adjacent display blocks, so that within a certain buffer area, the electronic device can be cropped based on the same display blocks, so that a multi-frame interface corresponding to the target display window can be obtained, and there is no need to recalculate the area to be rendered and re-render the area to be rendered frame by frame. Therefore, this method can improve the performance of electronic devices, reduce the probability of frame loss of electronic devices, and reduce the possibility of displaying white blocks.

[0128] FIG10 is a flow chart of a method for displaying an application interface provided in an embodiment of the present application. The method can be applied to electronic devices, and the flow may include the following steps:

[0129] Step 1001: Display the first interface of the application. The first interface includes a functional component and a web component. The web component includes a first web page, which is cropped based on the rendered first display block. The functional component can be used to display some functional information included in the application interface, and can display information included in fixed blocks, such as the information included in the fixed block 6020 shown in Figure 6, or the information included in the fixed block 7020 shown in Figure 7. Exemplarily, the functional component can be the native component described in the previous embodiment, which can be used to display some fixed information, such as controls 1 to 8 shown in Figure 1a.

[0130] In some implementations, the display area displayed by the functional component may also be cropped based on the rendered first display block. As shown in FIG. 7 , the first display block may include a fixed block shown as 7020 and a display block 1 shown as 7021 .

[0131] Step 1002: In response to a first sliding operation on the first interface, crop the first display block to obtain a second web page.

[0132] Step 1003: Display a second interface including the second web page.

[0133] It can be seen from steps 1001 to 1003 that, based on the method provided in the embodiment of the present application, the first interface and the second interface of the electronic device display application can be obtained by cropping based on the same display block.

[0134] FIG11 is another flow chart of a method for displaying an application interface provided by an embodiment of the present application. The method can be applied to electronic devices. In addition to the steps shown in FIG10 , the flow can also include the following steps:

[0135] Step 1004: Render a second display block in response to a second sliding operation on the first interface.

[0136] Step 1005: crop the second display block to obtain a third web page;

[0137] Step 1006: Display a third interface including the third web page.

[0138] It can be seen from steps 1001 to 1006 that, based on the method provided in the embodiment of the present application, when the electronic device detects the need to change the target display block (i.e., the second display block) based on a sliding operation, it can render the second display block and obtain the third interface after cropping.

[0139] FIG12 is another flow chart of a method for displaying an application interface provided by an embodiment of the present application. The method can be applied to electronic devices, and the process may include the following steps in addition to the steps shown in FIG11:

[0140] Step 1007: In response to a third sliding operation on the first interface, crop the second display block to obtain a fourth web page;

[0141] Step 1008: Display a fourth interface including the fourth web page.

[0142] It can be seen from steps 1001 to 1008 that, based on the method provided in the embodiment of the present application, the first interface and the second interface of the electronic device display application can be obtained by cropping based on the same display block, and the third interface and the fourth interface of the electronic device display application can be obtained by cropping based on another identical display block.

[0143] In the embodiment of the present application, the first display block overlaps with the second display block, and the overlapping height is greater than the height of the first interface.

[0144] The specific implementation of steps 1001 to 1008 may refer to the introduction in the aforementioned embodiment and will not be repeated here.

[0145] Based on the above embodiments, the present application also provides an electronic device, which includes multiple functional modules; the multiple functional modules interact with each other to implement the functions performed by the electronic device in each method described in the embodiments of the present application. The multiple functional modules can be implemented based on software, hardware, or a combination of software and hardware, and the multiple functional modules can be arbitrarily combined or divided based on the specific implementation. For example, steps 401 to 404 performed by the electronic device in the embodiment shown in Figure 4 are executed. For example, steps 1001 to 1003 performed by the electronic device in the embodiment shown in Figure 10 are executed, or steps 1001 to 1006 performed by the electronic device in the embodiment shown in Figure 11 are executed, or steps 1001 to 1008 performed by the electronic device in the embodiment shown in Figure 12 are executed.

[0146] Based on the above embodiments, the present application also provides an electronic device, which includes at least one processor and at least one memory, wherein computer program instructions are stored in at least one memory, and when the electronic device is running, the at least one processor executes the functions performed by the electronic device in each method described in the embodiments of the present application. For example, steps 401 to 404 executed by the electronic device in the embodiment shown in Figure 4 are executed. For example, steps 1001 to 1003 executed by the electronic device in the embodiment shown in Figure 10 are executed, or steps 1001 to 1006 executed by the electronic device in the embodiment shown in Figure 11 are executed, or steps 1001 to 1008 executed by the electronic device in the embodiment shown in Figure 12 are executed.

[0147] Based on the above embodiments, the present application also provides a computer program product, which includes: a computer program (also referred to as code, or instructions), which enables the various methods described in the embodiments of the present application to be executed when the computer program is run.

[0148] Based on the above embodiments, the present application further provides a computer-readable storage medium. The computer-readable storage medium stores a computer program (also referred to as code or instructions), which, when executed by a computer, causes the computer to perform the methods described in the embodiments of the present application.

[0149] Based on the above embodiments, the present application further provides a chip, which is used to read a computer program stored in a memory and implement the methods described in the embodiments of the present application.

[0150] Based on the above embodiments, the present application provides a chip system, which includes a processor for supporting a computer device to implement the various methods described in the embodiments of the present application. In a possible embodiment, the chip system also includes a memory, which is used to store the necessary programs and data for the computer device. The chip system can be composed of a chip, or it can include chips and other discrete devices. It should be understood by those skilled in the art that the embodiments of the present application can be provided as methods, systems, or computer program products. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0151] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the present application. It should be understood that each flow and / or box in the flow chart and / or block diagram, as well as the combination of the flow chart and / or box in the flow chart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device produce a device for implementing the functions specified in one or more flow charts and / or one or more boxes in the block diagram.

[0152] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a product including an instruction device that implements the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0153] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, so that the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0154] Obviously, those skilled in the art may make various modifications and variations to this application without departing from the scope of protection of this application. Thus, if these modifications and variations of this application fall within the scope of the claims of this application and their equivalents, this application is intended to include these modifications and variations.

Claims

1. A method for rendering a long interface, characterized in that: Used in electronic equipment, including: In response to a sliding operation on the long interface, determining a target display block adjacent to an original display block; wherein the original display block is a display block selected before the sliding operation is detected; the original display block and the target display block are both obtained based on dividing the long interface, the interval between the original display block and the target display block is less than the height of the display window, and the heights of the original display block and the target display block are greater than the height of the display window; Rendering the target display block; In response to the sliding operation, the rendered target display block is cropped frame by frame based on the display window to obtain a multi-frame target window interface and display it frame by frame.

2. The method according to claim 1, characterized in that The step of determining a target display block adjacent to an original display block in response to a sliding operation on the long interface includes: Determining a sliding offset value corresponding to the sliding operation; In the sliding direction, when the sliding offset value does not exceed the preset pixel value of the original display block, the selected target display block is determined to be the original display block; wherein, In the sliding direction, when the sliding offset value exceeds the preset pixel value of the original display block, the next display block adjacent to the original display block in the sliding direction is determined to be selected as the target display block.

3. The method according to claim 2, characterized in that The preset pixel value is the pixel value at the middle position of the original display block.

4. The method according to any one of claims 1 to 3, characterized in that Before determining the target display block adjacent to the original display block, the method further includes: According to the height of the long interface, the first preset height of the display block, and the preset interval between the display blocks, N display blocks and a tail display block are sequentially obtained, wherein the tail display block is the last display block obtained by division; N is a positive integer; The heights of the N display blocks are equal to the first preset height; and the height of the tail display block is less than or equal to the first preset height.

5. The method according to any one of claims 1 to 3, characterized in that Before determining the target display block adjacent to the original display block, the method further includes: According to the height of the long interface, the second preset height of the head display block, the second preset height of the display blocks, and the preset interval between the display blocks, a head display block, N-1 display blocks, and a tail display block are sequentially obtained, wherein the head display block is the first display block obtained by division, and the tail display block is the last display block obtained by division; wherein N is a positive integer; Among them, the height of the head display block is equal to the second preset height, and the second preset height is less than the first preset height; the height of the N-1 display blocks is equal to the first preset height; the height of the tail display block is less than or equal to the first preset height.

6. The method according to any one of claims 1 to 5, characterized in that The height of the display block is a preset multiple of the height of the display window, and the preset multiple is greater than 1; or The height of the display block is a predefined height, and the predefined height is greater than the height of the display window.

7. The method according to any one of claims 1 to 6, characterized in that The display window is a full-screen window of the electronic device, or an application window, or a non-full-screen window.

8. A method for displaying an application interface, characterized in that: include: Displaying a first interface of an application, the first interface including a functional component and a web component, the web component including a first web page, the first web page being cropped based on the rendered first display block; In response to a first sliding operation on the first interface, cropping the first display block to obtain a second web page; A second interface including the second web page is displayed.

9. The method according to claim 8, characterized in that The method further comprises: In response to a second sliding operation on the first interface, rendering a second display block; cropping the second display block to obtain a third web page; A third interface including the third web page is displayed.

10. The method according to claim 9, characterized in that The method further comprises: In response to a third sliding operation on the first interface, cropping the second display block to obtain a fourth web page; A fourth interface including the fourth web page is displayed.

11. The method according to claim 9 or 10, characterized in that The first display block overlaps with the second display block, and a height of the overlap is greater than a height of the first interface.

12. An electronic device, characterized in that: The method comprises at least one processor coupled to at least one memory, wherein the at least one processor is configured to read and execute a computer program stored in the at least one memory, so that the method according to any one of claims 1 to 7 is executed, or the method according to any one of claims 8 to 11 is executed.

13. A computer-readable storage medium, characterized in that The computer-readable storage medium stores instructions, and when the instructions are executed on a computer, the computer is caused to execute the method according to any one of claims 1 to 7, or the computer is caused to execute the method according to any one of claims 8 to 11.

14. A computer program product comprising instructions, characterized in that When the computer program product is run on a computer, the computer is caused to perform the method according to any one of claims 1 to 7 , or the computer is caused to perform the method according to any one of claims 8 to 11 .

Images