Scroll view processing method and its device, equipment and medium

Abstract

The present application discloses a scroll view processing method and its device, equipment, and medium, the method comprising: responding to a view loading instruction acting on a scroll view, loading a first view in the upper view level of the scroll view, and obtaining a background image and information header content from a view resource pool and loading them into the first view for display; obtaining second view group information from the view resource pool, so as to generate a second view navigation bar loading display according to the number of second views and multiple second view identification information contained therein, and loading second views in the scroll view whose number matches the number of second views; responding to a content loading instruction acting on a target second view, obtaining corresponding view content from the view resource pool and outputting it to the target second view for display; responding to a vertical scroll event acting on the current second view, and adjusting the display effect of the first view accordingly according to the scroll offset of the vertical scroll event. The present application can improve the development efficiency of web pages.

Description

Technical Field

[0001] The present application relates to the field of web pages, and in particular to a scroll view processing method, and also to corresponding devices, equipment and non-volatile storage media of the method. Background Art

[0002] The existing major content service Internet platforms all have a huge amount of platform content. In order to display their platform content for platform users to browse, it is often necessary to display as much platform content as possible on the web page without the platform users having to load different web pages for browsing, so as to save the platform users' operation time. Therefore, the platform has increasingly higher requirements for the information display of web pages in order to carry more platform content on pages with limited display space. For example, in the live broadcast platform, the live broadcast user's personal page needs to display the anchor user's personal information, the videos posted by the anchor user, and the anchor user's dynamics on the platform, etc. The platform content of the anchor user on the platform.

[0003] When developing web pages that need to display multiple contents, most Internet platforms need to layout the display positions of various types of content display controls in the page, so as to output different types of platform content in the web page for output and display while preventing interference between the content display controls, so as to improve the interactive capabilities of the web page. However, when developers develop different content high-load web pages according to business needs, they need to repeatedly layout the display positions of various types of content display controls in the development web page, and configure the interaction logic between the content display controls and the platform content they output. This will consume a lot of development time for developers, and the layout logic and interaction logic of each type of content display control in the web page are relatively complex and not easy for developers to maintain.

[0004] In view of the problems existing in web pages with high content load, the applicant has made corresponding explorations in order to solve the problems. Summary of the invention

[0005] The purpose of the present application is to provide a scroll view processing method to meet user needs, and also relates to corresponding devices, equipment, non-volatile storage media and computer program products of the method.

[0006] In order to achieve the purpose of this application, the following technical solutions are adopted:

[0007] A scroll view processing method proposed for the purpose of this application includes the following steps:

[0008] In response to a view loading instruction acting on the scroll view, a first view is loaded in an upper view level of the scroll view, and a background image and information header content of the first view are obtained from a view resource pool and loaded into the first view for display;

[0009] Acquire second view group information from the view resource pool, generate a corresponding second view navigation bar according to the number of second views and a plurality of second view identification information included in the second view group information, load the second view navigation bar into the same view hierarchy of the first view, and load the same number of second views as the number of the second views into the scroll view;

[0010] In response to the content loading instruction, obtaining the view content corresponding to the target second view from the view resource pool, so as to output the view content to the target second view for display;

[0011] In response to a vertical scrolling event acting on the current second view, a preset view scrolling algorithm is called to adjust the display effect of the first view according to the scrolling offset of the vertical scrolling event.

[0012] In a further embodiment, the step of obtaining the background image and information header content of the first view from the view resource pool and loading them into the first view for display comprises the following steps:

[0013] Acquire the background image and the information header content from the view resource pool, and acquire the scrolling display configuration acting on the background image and the information header content respectively;

[0014] Loading the background image into a first information header view of the first view, and loading the information header content into a second information header view of the first view, wherein the second information header view is located in an upper view level of the first information header view;

[0015] The scrolling display rules of the first information header view and the second information header view are respectively set according to the scrolling display configuration.

[0016] In a further embodiment, the step of generating a corresponding second view navigation bar and loading it into the same view hierarchy of the first view according to the number of second views and the plurality of second view identification information included in the second view group information comprises the following steps:

[0017] Acquire the number of second views and a plurality of second view identification information included in the second view group information, wherein the second view identification information includes view sorting information and a view name;

[0018] generating a second view navigation bar having the same number of second view options as the number of the second views, and assigning the view names contained in each piece of second view identification information to the second view options at corresponding positions in the second view navigation bar according to the view sorting information contained in each piece of second view identification information;

[0019] Load the second view navigation bar into the same view hierarchy as the first view.

[0020] In a further embodiment, the step of loading the same number of second views as the second views in the scroll view comprises the following steps:

[0021] According to the second view number included in the second view group information, loading the second views in the scroll view in a number that matches the number represented by the second view number;

[0022] assigning each of the view identifiers to a corresponding second view in sequence according to the view sorting information and the view identifier respectively included in the plurality of second view identifier information;

[0023] According to the sorting position of each second view, each second view is sequentially associated with the second view option at the corresponding position in the second view navigation bar.

[0024] In a further embodiment, the step of responding to the content loading instruction and obtaining the view content corresponding to the target second view from the view resource pool to output the view content to the target second view for display includes the following steps:

[0025] In response to a horizontal scroll instruction acting on the scroll view, determining a scroll direction of the horizontal scroll instruction;

[0026] Determine whether there is another second view in the scrolling direction of the second view currently in the visible window, and if so, switch the other second view to the visible window for display, and trigger a content loading instruction for the second view;

[0027] The view content of the second view pointed to by the content loading instruction is obtained from the view resource pool, so as to output the view content to the second view currently in the visible window for display.

[0028] In a further embodiment, the step of responding to the content loading instruction and obtaining the view content corresponding to the target second view from the view resource pool to output the view content to the target second view for display includes the following steps:

[0029] In response to a view option selection instruction acting on the second view navigation bar, determining a target second view corresponding to the view selection instruction;

[0030] Switching the second view currently displayed in the visual window to the target second view, and triggering the generation of a content loading instruction pointing to the target second view;

[0031] In response to the content loading instruction, the view content of the target second view is obtained from the view resource pool, so as to output the view content to the target second view for display.

[0032] In a further embodiment, the step of responding to a vertical scrolling event acting on the current second view and calling a preset view scrolling algorithm to adjust the display effect of the first view according to the scrolling offset of the vertical scrolling event includes the following steps:

[0033] In response to a vertical scrolling event acting on a second view currently displayed in the visual window, obtaining a scrolling offset corresponding to the vertical scrolling event;

[0034] Calculating a content scroll value of the view content of the second view from a content scroll origin according to the scroll offset, where the content scroll origin is determined based on an initial display position of the first view;

[0035] When the content scroll value is less than zero, it indicates that the view content displayed in the second view is scrolled upward, and the first view currently displayed in the visible window is synchronously shifted upward. When the content scroll value satisfies the scrolling display rule of the information header content in the first view, the information header content is displayed in a reduced size in the visible window.

[0036] When the content scroll value is greater than zero, it indicates that the view content displayed in the second view is scrolled downward, and the first view currently displayed in the visual window will be synchronously shifted downward. When the content scroll value satisfies the scrolling display rule of the background image in the first view, the background image will be displayed in an enlarged manner in the visual window.

[0037] A scroll view processing device proposed for the purpose of this application includes:

[0038] A first view loading module, configured to respond to a view loading instruction acting on a scroll view, load a first view in a view level above the scroll view, and obtain a background image and information header content of the first view from a view resource pool and load them into the first view for display;

[0039] a second view loading module, configured to obtain second view group information from the view resource pool, generate a corresponding second view navigation bar according to the number of second views and a plurality of second view identification information included in the second view group information, load the second view navigation bar into the same view level of the first view, and load the same number of second views as the number of the second views into the scroll view;

[0040] A view content loading module, configured to respond to a content loading instruction, obtain the view content corresponding to the target second view from the view resource pool, and output the view content to the target second view for display;

[0041] The view display adjustment module is used to respond to a longitudinal scrolling event acting on the current second view and call a preset view scrolling algorithm to adjust the display effect of the first view according to the scrolling offset of the longitudinal scrolling event.

[0042] In a further embodiment, the first view loading module includes:

[0043] A content acquisition submodule, used to acquire the background image and information header content from the view resource pool, and to acquire scrolling display configurations acting on the background image and information header content respectively;

[0044] a content loading submodule, configured to load the background image into a first information header view of the first view, and load the information header content into a second information header view of the first view, wherein the second information header view is located in an upper view level of the first information header view;

[0045] The display setting submodule is used to set the scrolling display rules of the first information header view and the second information header view respectively according to the scrolling display configuration.

[0046] In a further embodiment, the second view loading module includes:

[0047] a group information parsing submodule, configured to obtain the number of second views and a plurality of second view identification information contained in the second view group information, wherein the second view identification information includes view sorting information and a view name;

[0048] a navigation bar generating submodule, configured to generate a second view navigation bar having a number of second view options that matches the number of second views, and assigning a view name included in each second view identification information to a second view option at a corresponding position in the second view navigation bar according to view sorting information included in each second view identification information;

[0049] The navigation bar loading submodule is used to load the second view navigation bar into the same view hierarchy of the first view.

[0050] In a preferred embodiment, the second view loading module further includes:

[0051] A second view loading submodule, configured to load, in the scroll view, a number of second views corresponding to the number of second views represented by the number of second views included in the second view group information;

[0052] a view identifier assigning submodule, configured to assign each of the view identifiers to a corresponding second view in order according to the view sorting information and the view identifier respectively included in the plurality of second view identifier information;

[0053] The option association submodule is used to associate each of the second views with the second view options at the corresponding position in the second view navigation bar in order according to the sorting position of each of the second views.

[0054] In a further embodiment, the view content loading module includes:

[0055] A scroll instruction response submodule, used to respond to a horizontal scroll instruction acting on the scroll view and determine a scroll direction of the horizontal scroll instruction;

[0056] A content loading triggering submodule, used to determine whether the second view currently in the visible window has another second view in the scrolling direction, and if so, switch the other second view to the visible window for display, and trigger a content loading instruction acting on the second view;

[0057] The content loading submodule is used to obtain the view content of the second view pointed to by the content loading instruction from the view resource pool, so as to output the view content to the second view currently in the visible window for display.

[0058] In a preferred embodiment, the view content loading module further includes:

[0059] A view selection submodule, configured to respond to a view option selection instruction acting on the second view navigation bar and determine a target second view corresponding to the view selection instruction;

[0060] A content loading triggering submodule, used to switch the second view currently displayed in the visual window to the target second view, and trigger the generation of a content loading instruction pointing to the target second view;

[0061] The content loading submodule is used to respond to the content loading instruction and obtain the view content of the target second view from the view resource pool to output the view content to the target second view for display.

[0062] In a further embodiment, the view display adjustment module includes:

[0063] A vertical scroll response submodule, used to respond to a vertical scroll event acting on a second view currently displayed in the visual window, and obtain a scroll offset corresponding to the vertical scroll event;

[0064] A scroll value calculation submodule, configured to calculate a content scroll value of the view content of the second view from a content scroll origin according to the scroll offset, wherein the content scroll origin is determined based on an initial display position of the first view;

[0065] An upward scroll response submodule, for, when the content scroll value is less than zero, it is characterized as scrolling the view content displayed in the second view upward, then the first view currently displayed in the visual window will be synchronously shifted upward, and when the content scroll value satisfies the scroll display rule of the information header content in the first view, then the information header content will be displayed in a reduced size in the visual window;

[0066] The downward scrolling response submodule is used to, when the content scrolling value is greater than zero, represent the view content displayed in the second view being scrolled downward, and the first view currently displayed in the visual window will be synchronously shifted downward, and when the content scrolling value meets the scrolling display rule of the background image in the first view, the background image will be displayed in an enlarged manner in the visual window.

[0067] In order to solve the above technical problems, an embodiment of the present application also provides a computer device, including a memory and a processor, wherein the memory stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the processor executes the steps of the above-mentioned scroll view processing method.

[0068] In order to solve the above technical problem, an embodiment of the present application further provides a storage medium storing computer-readable instructions, and when the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the above-mentioned scroll view processing method.

[0069] In order to solve the above technical problem, an embodiment of the present application further provides a computer program product, including a computer program and computer instructions. When the computer program and computer instructions are executed by a processor, the processor executes the steps of the above scroll view processing method.

[0070] Compared with the prior art, the advantages of this application are as follows:

[0071] The layout and interaction logic of the views in the high-load content page constructed by the present application are decoupled from the view resources. The view layout, loading and interaction logic are encapsulated as a view processing module, and the view resources in the network page are stored by the view resource pool. The view processing module loads various types of views in the network page according to the layout logic, obtains the view content from the view resource pool and outputs it to the corresponding view for display, and processes the display logic between the views in the network page. When developing a high-load content page, developers only need to configure the number of each type in the development page and the view content output by it to complete the development of the high-load content page, without having to redevelop the layout, output and interaction logic of each view in the page when developing network pages for different businesses, thereby effectively improving the development efficiency of developers in developing high-load content pages. The view processing logic and view resources are decoupled from each other, which is convenient for developers to maintain high-load content network pages and can easily customize the view content output by each view in the network page.

[0072] Secondly, this application monitors the user's sliding operation on the page to adjust the display effect of the first view in the page according to the view scrolling algorithm, so as to prevent the views in the web page from blocking each other and causing the user to be unable to browse the corresponding view content. At the same time, the corresponding view content can be displayed in a specific way for the user to browse in detail, thereby improving the user's browsing experience when browsing high-content-loaded pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0073] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the following description of the embodiments in conjunction with the accompanying drawings, in which:

[0074] Figure 1 A schematic diagram of a typical network deployment architecture related to implementing the technical solution of this application;

[0075] Figure 2 A flowchart of a typical embodiment of the scroll view processing method of the present application;

[0076] Figure 3 This is a schematic diagram of the interface of the scroll view in which the first view and the second view have been loaded in this application;

[0077] Figure 4 This is a schematic diagram of the interface of the first view for outputting the background image and the information header content in this application;

[0078] Figure 5 This is a schematic diagram of the interface of the second view navigation bar in this application;

[0079] Figure 6 This is a schematic diagram of the interface of the second view for outputting view content in this application;

[0080] Figure 7It is a schematic diagram of various massive parameters in the first view, the second view navigation bar and the view content of the second view in this application;

[0081] Figure 8 A schematic diagram of the upward displacement of the first view, the second view navigation bar and the view content of the second view in this application;

[0082] Fig. 9 A schematic diagram of a graphical user interface for upwardly shifting a first view, a second view navigation bar, and a view content of a second view in the present application;

[0083] Fig.10 A schematic diagram of a first view, a second view navigation bar and a view content of the second view shifted downward in this application;

[0084] Fig.11 A schematic diagram of a graphical user interface for downward displacement of a first view, a second view navigation bar, and a view content of a second view in the present application;

[0085] Fig.12 A flowchart of a specific embodiment of the present application for loading a first view and obtaining a background image and information header content for outputting the first view;

[0086] Fig.13 This is a flow chart of a specific embodiment of outputting a second view navigation bar in the present application;

[0087] Fig.14 This is a schematic diagram of the interface of the scroll view for completing the loading of the second view in this application;

[0088] Fig.15 A schematic diagram of a flow chart formed by a specific embodiment of loading a second view in the present application;

[0089] Fig.16 This is a schematic diagram of the interface of the second view in which the visible window and position are ranked first in this application;

[0090] Fig.17 A schematic diagram of an interface of a second view having the second highest ranking of visible windows and non-output view contents in the present application;

[0091] Fig.18 A schematic diagram of an interface of a second view in which the visible window and the output view content are ranked second in the present application;

[0092] Fig.19 A flowchart diagram of a specific embodiment of loading the view content of a target second view in response to a horizontal scrolling instruction in the present application;

[0093] Fig. 20A flowchart of a specific embodiment of the present application for responding to a view option selection instruction of a second view navigation bar to load the view content of a target second view;

[0094] Fig.21 A flowchart diagram of a specific embodiment of adjusting the display effect of a first view in response to a vertical scrolling event in the present application;

[0095] Fig. 22 A schematic block diagram of a typical embodiment of a scroll view processing device of the present application;

[0096] Fig.23 This is a basic structural block diagram of a computer device according to an embodiment of the present application. DETAILED DESCRIPTION

[0097] The embodiments of the present application are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present application, and cannot be interpreted as limiting the present application.

[0098] It will be understood by those skilled in the art that, unless expressly stated, the singular forms "one", "said", and "the" used herein may also include plural forms. It should be further understood that the term "comprising" used in the specification of the present application refers to the presence of the features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof. It should be understood that when we refer to an element as being "connected" or "coupled" to another element, it may be directly connected or coupled to the other element, or there may be an intermediate element. In addition, the "connection" or "coupling" used herein may include wireless connection or wireless coupling. The term "and / or" used herein includes all or any unit and all combinations of one or more associated listed items.

[0099] It will be understood by those skilled in the art that, unless otherwise defined, all terms (including technical and scientific terms) used herein have the same meaning as those generally understood by those skilled in the art to which this application belongs. It should also be understood that terms such as those defined in general dictionaries should be understood to have meanings consistent with those in the context of the prior art, and will not be interpreted with idealized or overly formal meanings unless specifically defined as here.

[0100] It will be understood by those skilled in the art that the "client", "terminal" and "terminal device" used herein include both devices with wireless signal receivers, which are devices with only wireless signal receivers without transmission capabilities, and devices with receiving and transmitting hardware, which are devices with receiving and transmitting hardware capable of two-way communication on a two-way communication link. Such devices may include: cellular or other communication devices such as personal computers, tablet computers, which have single-line displays or multi-line displays or cellular or other communication devices without multi-line displays; PCS (Personal Communications Service, personal communication system), which can combine voice, data processing, fax and / or data communication capabilities; PDA (Personal Digital Assistant, personal digital assistant), which may include a radio frequency receiver, pager, Internet / intranet access, web browser, notepad, calendar and / or GPS (Global Positioning System, global positioning system) receiver; traditional laptop and / or palmtop computers or other devices, which have and / or include radio frequency receivers. The "client", "terminal" and "terminal device" used herein may be portable, transportable, installed in a vehicle (air, sea and / or land), or suitable for and / or configured to run locally, and / or in a distributed form, at any other location on the earth and / or in space. The "client", "terminal" and "terminal device" used herein may also be a communication terminal, an Internet terminal, a music / video playing terminal, for example, a PDA, a MID (Mobile Internet Device) and / or a mobile phone with a music / video playing function, or a smart TV, a set-top box and other devices.

[0101] The hardware referred to by the names such as "server", "client", and "work node" in this application is essentially an electronic device with the equivalent capabilities of a personal computer. It is a hardware device with the necessary components revealed by the von Neumann principle, such as a central processing unit (including an arithmetic unit and a controller), a memory, an input device, and an output device. The computer program is stored in its memory, and the central processing unit calls the program stored in the external memory into the internal memory for execution, executes the instructions in the program, and interacts with the input and output devices to complete specific functions.

[0102] It should be pointed out that the concept of "server" referred to in this application can also be extended to the case of server clusters. According to the network deployment principle understood by those skilled in the art, the servers should be logically divided. In physical space, these servers can be independent of each other but can be called through interfaces, or integrated into a physical computer or a set of computer clusters. Those skilled in the art should understand this flexibility, and should not use it to restrict the implementation of the network deployment method of this application.

[0103] See also Figure 1 , the hardware foundation required for the implementation of the relevant technical solutions of this application can be deployed according to the architecture shown in the figure. The server 80 referred to in this application is deployed in the cloud. As an online server, it can be responsible for further connecting relevant data servers and other servers that provide relevant support, etc., so as to form a logically related service cluster to provide services for related terminal devices such as the smartphone 81 and personal computer 82 shown in the figure or a third-party server (not shown). The smartphone and personal computer can access the Internet through a well-known network access method and establish a data communication link with the server 80 in the cloud to run terminal applications related to the services provided by the server.

[0104] For the server, the application is usually constructed as a service process, opening the corresponding program interface for remote calls by applications running on various terminal devices. The relevant technical solutions in this application that are suitable for running on the server can be implemented in the server in this way.

[0105] The application described herein refers to an application running on a server or terminal device. This application implements the relevant technical solutions of the present application in a programming manner. Its program code can be stored in a non-volatile storage medium recognizable by a computer in the form of computer executable instructions, and can be loaded into the memory by the central processing unit for execution. The relevant device of the present application is constructed by the operation of the application on the computer.

[0106] For the server, the application is usually constructed as a service process, opening the corresponding program interface for remote calls by applications running on various terminal devices. The relevant technical solutions in this application that are suitable for running on the server can be implemented in the server in this way.

[0107] Those skilled in the art should be aware that, although the various methods of the present application are described based on the same concept and thus present commonality to each other, unless otherwise specified, these methods can be independently executed. Similarly, for each embodiment disclosed in the present application, they are all proposed based on the same inventive concept, therefore, concepts with the same expression, and concepts that are appropriately changed for convenience despite different expressions, should be understood as equivalent.

[0108] See also Figure 2 A scroll view processing method of the present application, in a typical embodiment, comprises the following steps:

[0109] Step S11, in response to a view loading instruction acting on the scroll view, a first view is loaded in the upper view level of the scroll view, and a background image and information header content of the first view are obtained from a view resource pool and loaded into the first view for display:

[0110] After loading the target page, the current terminal will trigger the view loading instruction acting on the scroll view of the target page, so that the view processing module of the current terminal responds to the view loading instruction, loads the first view and the second view in the scroll view, and loads the view content of the first view and the second view.

[0111] The scroll view may load multiple second views, and the second views loaded into the scroll view are arranged in parallel, so that the second view currently in the visible window output display in the scroll view is switched by responding to a horizontal scroll event acting on the scroll view. The visible window refers to a window displaying a picture in a graphical user interface of the current terminal. For details, please refer to Figure 3 ,like Figure 3 In the scroll view of the example, three second views have been loaded in the scroll view 301, namely the second view 302, the second view 303 and the second view 304. The three second views are arranged in parallel in the scroll view 301, and the second view 303 currently in the visible window 305 can be browsed by the operating user. When the operating user performs a right horizontal swipe, the second view 303 in the visible window 305 will be switched to the second view 302, and then the second view 302 will be output to the graphical user interface of the current terminal for display. For the specific implementation methods of the second view and its loading, please refer to the subsequent steps, and this step will not be repeated.

[0112] After the current terminal responds to the view loading instruction, the first view is loaded in the upper view level of the scroll view to prevent the first view from being affected by the horizontal scrolling event of the scroll view when the scroll view is horizontally scrolled to switch to the second view in the visible window, and the first view is always displayed in the graphical user interface output to the current terminal in the visible window. Specifically, Figure 3 As shown, Figure 3 The first view 306 shown in the figure is in the upper view level of the scroll view 301 . No matter whether the second view in the visible window 305 is switched or not, the first view 306 will always be in the visible window 305 .

[0113] After the current terminal loads the first view, it will obtain the view content such as the background image and information header content of the first view from the view resource pool, so as to load the background image and information header content into the first view for display; the view content and view configuration of the first view and the second view stored in the view resource pool will be linked to the business associated with the target page. For example, when the business associated with the target page is the anchor user space, the information header content of the first view in the corresponding view resource pool can be anchor personal information such as the anchor avatar, anchor name and number of anchor fans, and the background image can be an image such as a personal photo of the anchor user corresponding to the target page. Correspondingly, each second view in the view resource pool has its own The view content can be anchor video, anchor dynamics, anchor personal information and other anchor-related content. In addition, the view resource pool is generally located in the corresponding server, and of course it can also be located in the storage space of the current terminal, which needs to be determined according to the business associated with the view resource pool. It can be understood that the developer only needs to design the first view and the second view related configurations of the view resource pool according to the business. The view processing module will load the first view and the second view designed by the developer according to the view resource pool into the corresponding page to meet the business needs, without the need for the developer to design the loading method of the first view and the second view and the related view framework, so as to save the developer's development time and improve development efficiency.

[0114] After the current terminal obtains the background image and the information header content from the view resource pool, the background image is loaded into the first information header view of the first view, and the information header content is loaded into the second information header view of the first view; the first information header view and the second information header view are views included in the first view, and the second information header view is located in the upper view level of the first information header view. For details, please refer to Figure 4 , Figure 4 is a schematic diagram of the first view, Figure 4The first view 401 shown in the figure has the first information header view 402 and the second information header view 403 shown, wherein the background image is loaded in the first information header view 402, and each control in the second information header view 403 is loaded with the content included in the information header content, such as loading the anchor avatar, anchor name and number of anchor fans included in the information header content into the corresponding related controls in the second information header view 403 for display.

[0115] When the current terminal obtains the background image and information header content from the view resource pool, it will also obtain the scrolling display configuration acting on the background image and information header content from the view resource pool, and configure the scrolling display rules of the first information header view that loads the background image and the second information header view that loads the information header content respectively according to the scrolling display configuration, so that when responding to the vertical scrolling event of the second view subsequently, the display effect of the first view is adjusted according to the scrolling display rules of the first information header view and the second information header view.

[0116] Step S12, obtaining the second view group information from the view resource pool, generating a corresponding second view navigation bar according to the number of second views and multiple second view identification information included in the second view group information, loading it into the same view level of the first view, and loading the same number of second views as the number of second views into the scroll view:

[0117] When the current terminal loads the first view, it will also load the second view. The current terminal will obtain the second view group information from the view resource pool, and then act on the loading process of the second view of the scroll view according to the second view group information.

[0118] The second view group information includes the second view number representing the number of second views to be loaded, and the second view identification information corresponding to each second view. The second view identification information generally includes view sorting information representing the sorting position of the second view in the scroll view, the view name representing the name of the second view, and the view identification of the second view, so that the current terminal generates the second view navigation bar according to the second view number and the second view identification information corresponding to each second view.

[0119] The second view navigation bar is used to represent the second views existing in the scroll page and trigger the selection event of each second view. Regarding the specific generation method of the second navigation bar generated by the current terminal, the current terminal first generates a second view navigation bar with a number of second view options represented by the second view number according to the second view number, and then assigns the view names contained in the second view identification information to the second view options at the corresponding positions in the second view navigation bar in sequence according to the view sorting information contained in each second view identification information. For example, please refer to Figure 5 For example, when the number of second views represented by the second number of views is 3, the current terminal will generate the following Figure 5 The second view navigation bar 501A shown has three second view options, and when the view name of the second view with view sorting information of 1 is "Video", the view name of the second view with view sorting information of 2 is "Dynamic", and the view name of the second view with view sorting information of 3 is "Information", the current terminal assigns these view names to the second view options at the corresponding positions of the second navigation bar 501A, and then modifies the second view navigation bar 501A to the second view navigation bar 501B.

[0120] When the current terminal generates the second view navigation bar, it will load the second views corresponding to the number represented by the second view number in the scroll view according to the second view number included in the second view group information, so that when the generation of the second view navigation bar is completed, the second views will be sequentially associated with the second view options at corresponding positions in the second view navigation bar according to the view sorting information of each of the second views, so that the subsequent user can scroll the second view currently in the visible window to the second view associated with the selected second view option by selecting the corresponding second view option in the second navigation bar.

[0121] Step S13, in response to the content loading instruction, obtaining the view content corresponding to the target second view from the view resource pool, so as to output the view content to the target second view for display:

[0122] After the current terminal completes the generation and loading of the second view navigation bar and the second view, it will load the corresponding view content for the target second view currently in the visible window, and will trigger the content loading instruction acting on the target second view, so that the current terminal responds to the content loading instruction, obtains the view content of the target second view from the view resource pool, and then outputs the view content to the target second view for display.

[0123] The view content includes one or more content controls and content data corresponding to each of the content controls, and the content controls and content data included in the view content are associated with a second view associated with the view content. For example, please refer to Figure 6 When the second view is the live video view, the content control included in the view content corresponding to the second view is the video introduction information control and the content data included is the video feature information. Then the second view will be as follows Figure 6 The second view 601 shown outputs the video brief information control 602 shown, and the video brief information control 602 shown outputs corresponding video feature information.

[0124] In one embodiment, when the operating user of the current terminal switches the second view displayed in the visible window through a horizontal sliding operation, the current terminal will respond to the horizontal scrolling instruction acting on the displayed scroll view, and the scrolling direction corresponding to the horizontal scrolling instruction will correspond to the sliding direction of the horizontal sliding operation. The current terminal will determine whether there is another second view in the second view currently in the visible window in the scrolling direction. If so, the other second view will be switched to the visible window as the target second view for display, and the content loading instruction acting on the target second view will be triggered to respond, thereby obtaining the view content of the target second view from the view resource pool, so as to load the view content into the target second view for display.

[0125] In another embodiment, the operating user of the current terminal can select any view option in the second view navigation bar to trigger the view option selection instruction acting on the view option, so that the current terminal responds to the view option selection instruction, determines the target second view associated with the view option, and then switches the second view currently displayed in the visual window to the target second view, and at the same time triggers a content loading instruction responding to the target second view to obtain the view content of the target second view from the view resource pool, and then outputs the view content to the target second view for display.

[0126] Step S14, in response to the vertical scrolling event acting on the current second view, calling a preset view scrolling algorithm to adjust the display effect of the first view according to the scrolling offset of the vertical scrolling event:

[0127] When the operating user of the current terminal performs a vertical sliding operation on the second view currently in the visible window, the vertical scrolling event acting on the second view will be triggered. The current terminal will respond to the vertical scrolling event to call the preset view scrolling algorithm to adjust the display effect of the first view in the visible window according to the scrolling offset corresponding to the vertical scrolling event.

[0128] The current terminal responds to the vertical scrolling event to determine the scrolling offset value of the view content in the second view corresponding to the vertical scrolling event based on the distance slid by the operating user when performing a vertical sliding operation on the second view currently in the visible window in the vertical scrolling event, that is, the scrolling offset value refers to the offset value of the view content output in the second view.

[0129] Please refer to Figure 7 ,like Figure 7 As shown, the initialized second view 701 generally reserves the view reserved height 702 shown, so that when the view content 708 in the second view 701 is initialized, the content control corresponding to the view content 708 is loaded below the view reserved height 702 of the second view 701 for outputting the view content 708, so as to prevent the first view 706 and the second view navigation bar 707 from blocking the view content 708 in the second view 701 when the first view 706 and the second view navigation bar 707 block the view space corresponding to the view reserved height 702 of the second view 701.

[0130] Please refer to Figure 7 , regarding an implementation manner in which the current terminal adjusts the display effect of the first view in the visible window corresponding to the scroll offset corresponding to the longitudinal scroll event, specifically, after the current terminal obtains the scroll offset in response to the longitudinal scroll event acting on the second view currently displayed in the visible window, the current terminal calculates the content scroll value of the view content of the second view from the content scroll origin according to the scroll offset, and the content scroll origin is determined based on the initial display position of the first view, such as Figure 7 As shown, Figure 7 The content scrolling origin 705 shown is below the reserved height of the view shown, which indicates that the content scrolling value refers to the distance between the view content 708 in the second view 701 and the content scrolling origin 705 shown. Correspondingly, the scrolling offset origin 704 shown corresponds to the scrolling offset value of the longitudinal scrolling event. The current terminal calculates the corresponding content scrolling value according to the scrolling offset value to move the view content 708 according to the content scrolling value. When moving the view content 708, the first view 706 and the second view navigation bar 707 will also be moved accordingly to adjust the display effect of the first view 706 in the visible window.

[0131] Please refer to Figure 6 , Figure 7 , Figure 8 and Fig. 9 When the content scroll value is less than zero, it indicates that the view content displayed in the second view is scrolled upward, such as Figure 7As shown, the view content 708 is moved upward, and the first view 706 and the second view navigation bar 707 are synchronously shifted upward; and when the content scroll value meets the scroll display rule of the information header content in the first view, the information header content will be displayed in a reduced size in the visible window, such as Figure 8 As shown, Figure 7 The view content 708 shown in FIG. 7 changes to Figure 8 The view content 804 shown in the figure moves the distance of the content scroll value 802 shown in the figure, and satisfies the Figure 7 The scrolling display rule of the first view 706 is as follows: Figure 7 The first view 706 shown changes to Figure 8 The zoomed-out first view 806 shown corresponds to Figure 7 The second view navigation bar 707 shown in FIG. 7 has moved Figure 8 The content scrolling distance of value 802 shown changes to Figure 8 The second view navigation bar 803 shown in FIG. 803; please refer to Figure 6 and Fig. 9 , the information header content in the first view of the zoomed display is as follows Figure 6 The first view 603 shown in FIG. 6 changes to Fig. 9 The first view 901 shown is a zoomed-out display of the information header content displayed in the first view 603 .

[0132] Please refer to Figure 6 , Figure 7 , Fig.10 and Fig.11 When the content scroll value is greater than zero, it indicates that the view content displayed in the second view is scrolled down, such as Figure 7 As shown, the view content 708 is moved downward, and the first view 706 and the second view navigation bar 707 are synchronously shifted downward; and when the content scroll value meets the scroll display rule of the background image in the first view, the background image is magnified and displayed in the visible window, as shown in FIG. Fig.10 As shown, Figure 7 The view content 708 shown in FIG. 7 changes to Fig.10 The view content 1002 shown in FIG. 1002 moves the distance of the content scroll value 1001 shown in FIG. 1001 , and satisfies the requirement Figure 7 The scrolling display rule of the first view 706 is as follows: Figure 7 The first view 706 shown in FIG. 1001 is changed into the enlarged first view 1003 shown in FIG. 1001 . Figure 7 The second view navigation bar 707 shown in FIG. 7 has moved Fig.10 The content shown scrolls by a distance of 1001 and changes to Fig.10 The second view navigation bar 1004 shown in FIG. 1004; please refer to Figure 6 and Fig.11 The information header content in the first view displayed in an enlarged manner is as follows: Figure 6 The first view 603 shown in FIG. 6 changes to Fig.11 The first view 1101 shown in the figure enlarges and displays the background image shown in the first view 603 .

[0133] Through the typical implementation of the method, it can be known that the layout and interaction logic of the view in the high-load content page constructed by the method are decoupled from the view resources, the view layout, loading and interaction logic are encapsulated as a view processing module, and the view resources in the network page are stored by the view resource pool. The view processing module loads various types of views in the network page according to the layout logic, obtains the view content from the view resource pool and outputs it to the corresponding view for display, and processes the display logic between the views in the network page. When developing a high-load content page, the developer only needs to configure the number of each type in the development page and the view content output by it to complete the development of the high-load content page, without having to redevelop the layout, output and interaction logic of each view in the page when developing network pages for different businesses, thereby effectively improving the development efficiency of developers in developing high-load content pages, and the view processing logic is decoupled from the view resources, which is convenient for developers to maintain high-load content network pages and can easily customize the view content output by each view in the network page.

[0134] Secondly, this method monitors the user's sliding operation on the page to adjust the display effect of the first view in the page according to the view scrolling algorithm, thereby preventing the views in the network page from blocking each other and causing the user to be unable to browse the corresponding view content. At the same time, the corresponding view content can be displayed in a specific way for the user to browse in detail, thereby improving the user's browsing experience when browsing high-content-loaded pages.

[0135] The above typical embodiments and their variant embodiments fully disclose the implementation scheme of the scroll view processing method of the present application. However, various variant embodiments of the method can still be derived by changing and amplifying some technical means. Other embodiments are briefly described as follows:

[0136] In one embodiment, please refer to Figure 4 , Figure 6 , Fig. 9 , Fig.11 and Fig.12 The step of obtaining the background image and information header content of the first view from the view resource pool and loading them into the first view for display includes the following steps:

[0137] Step S111, obtaining the background image and the information header content from the view resource pool, and obtaining the scrolling display configuration acting on the background image and the information header content respectively:

[0138] After the current terminal responds to the view loading instruction acting on the scroll view, it will load the first view in the previous view level in the scroll view, obtain the background image and information header content from the view resource pool, and obtain the scrolling display configuration of the background image and the scrolling display configuration of the information header content.

[0139] Step S112, loading the background image into the first information header view of the first view, and loading the information header content into the second information header view of the first view, wherein the second information header view is located in the upper view level of the first information header view:

[0140] Please refer to Figure 4 , Figure 4 is a schematic diagram of the first view, Figure 4 The first view 401 shown in the figure has the first information header view 402 and the second information header view 403 shown, wherein the background image is loaded in the first information header view 402, and each control in the second information header view 403 is loaded with the content included in the information header content, such as loading the anchor avatar, anchor name and number of anchor fans included in the information header content into the corresponding related controls in the second information header view 403 for display.

[0141] Step S113, setting the scrolling display rules of the first information header view and the second information header view respectively according to the scrolling display configuration:

[0142] Please refer to Figure 6 , Fig. 9 and Fig.11 , the current terminal sets the scrolling display rule of the first information header view according to the scrolling display configuration of the background image, and sets the scrolling display rule of the second information header view according to the scrolling display configuration of the information header content, such as Figure 6 , Fig. 9 and Fig.11 , when satisfied Figure 6 When the scrolling display rule of the first information header view 606 in the first view 603 is changed, the first information header view 606 will be enlarged and displayed to change to Fig.11 The first information header view 1102 in the first view 1101 in Figure 6 When the scrolling display rule of the second information header view 607 in the first view 603 is changed, the first information header view 607 will be displayed in a reduced size to change to Fig. 9The second information header view 902 in the first view 901.

[0143] In this embodiment, the current terminal loads the first view into the upper view level of the scroll view to prevent the display of the first view in the visible window from being affected by the horizontal sliding event of the scroll view, and obtains the background image, view content and the scrolling display configuration of both parties from the view resource pool to load the content of the first view and set related scrolling display rules.

[0144] In one embodiment, please refer to Figure 5 and Fig.13 The step of generating a corresponding second view navigation bar and loading it into the same view hierarchy of the first view according to the number of second views and the plurality of second view identification information included in the second view group information comprises the following steps:

[0145] Step S121, obtaining the number of second views and a plurality of second view identification information included in the second view group information, wherein the second view identification information includes view sorting information and view names:

[0146] The second view group information includes the second view number representing the number of second views to be loaded, and the second view identification information corresponding to each second view. The second view identification information generally includes view sorting information representing the sorting position of the second view in the scroll view, the view name representing the name of the second view, and the view identification of the second view, so that the current terminal generates the second view navigation bar according to the second view number and the second view identification information corresponding to each second view.

[0147] Step S122: Generate a second view navigation bar having the same number of second view options as the number of the second views, and assign the view name contained in each second view identification information to the second view option at the corresponding position in the second view navigation bar according to the view sorting information contained in each second view identification information:

[0148] The current terminal first generates a second view navigation bar having a number of second view options represented by the second view number according to the second view number, and then assigns the view names contained in the second view identification information to the second view options at corresponding positions in the second view navigation bar in order according to the view sorting information contained in each second view identification information. For example, please refer to Figure 5 For example, when the number of second views represented by the second number of views is 3, the current terminal will generate the following Figure 5The second view navigation bar 501A shown has three second view options, and when the view name of the second view with view sorting information of 1 is "Video", the view name of the second view with view sorting information of 2 is "Dynamic", and the view name of the second view with view sorting information of 3 is "Information", the current terminal assigns these view names to the second view options at the corresponding positions of the second navigation bar 501A, and then modifies the second view navigation bar 501A to the second view navigation bar 501B.

[0149] Step S123: loading the second view navigation bar into the same view hierarchy of the first view:

[0150] After the current terminal completes the generation of the second view navigation bar shown, it loads the second view navigation bar into the same view level of the first view shown, that is, it loads the second view navigation bar into the previous view level of the scroll view to prevent the display of the second view navigation bar in the visible window from being affected by the horizontal sliding event of the scroll view.

[0151] In this embodiment, a second view navigation bar is generated for loading and displaying, so that the user can determine the number of second views in the scroll view and the content in each second view through the second view navigation bar.

[0152] In one embodiment, please refer to Figure 5 , Fig.14 and Fig.15 The step of loading the same number of second views as the second views in the scroll view comprises the following steps:

[0153] Step S121': according to the second view number included in the second view group information, load the second views in the scroll view in the number that matches the number represented by the second view number:

[0154] Please refer to Fig.14 , when the number of the second views is 3, the current terminal will load 3 second views in the scroll view, such as Fig.14 As shown, when the number of the second views is 3, the current terminal will load the second view 1402 , the second view 1403 and the second view 1404 in the scroll view 1401 .

[0155] Step S122': assign each of the view identifiers to a corresponding second view in sequence according to the view sorting information and the view identifier contained in each of the plurality of second view identifier information:

[0156] Please refer to Fig.14, when there are three second view identification information in the second view group information, and the view ordering information contained in the first second view identification information is 1 and the view identification is a video view identification, then Fig.14 The second view 1402 shown in the figure will be assigned the video view identifier, and when the view order information contained in the second second view identifier information is 2 and the view identifier is a dynamic view identifier, then Fig.14 The second view 1403 shown in FIG. 1403 will be assigned the dynamic view identifier. Correspondingly, when the view sorting information included in the third second view identifier information is 3 and the view identifier is a data view identifier, Fig.14 The second view 1403 shown in FIG. 14A will be assigned the profile view identifier.

[0157] Step S123': according to the sorting position of each second view, sequentially associate each second view with the second view option at the corresponding position in the second view navigation bar:

[0158] Please refer to Figure 5 and Fig.14 , as described in step S122', Fig.14 The view identifier of the second view 1402 shown in the figure is a video view identifier, the view identifier of the second view 1403 shown in the figure is a dynamic view identifier, the view identifier of the second view 1404 shown in the figure is a data view identifier, and the sorting position of each second view shown in the figure is the same as that of the second view 1404 shown in the figure. Figure 5 The second view option in the second view navigation bar 501B shown in FIG. 5 corresponds to the view name, and the current terminal can Fig.14 The sorting positions of the second views shown in Fig.14 The second views shown are sequentially associated with Figure 5 The second view options at the corresponding position in the second view navigation bar 501B shown in FIG. Fig.14 The view shown is labeled "Video". The second view 1402 is associated with Figure 5 The second view option shown in the second navigation bar 501B is the first one with the view name "Video".

[0159] In this embodiment, a corresponding number of second views are loaded in the scroll view, and each second view is associated with a second view option in the second view navigation bar, so that the user can switch the second view displayed in the visible window through the second view navigation bar, and the second view currently in the visible window is represented by the second view navigation bar.

[0160] In one embodiment, please refer to Fig.16 , Fig.17 , Fig.18 and Fig.19The step of responding to the content loading instruction and obtaining the view content corresponding to the target second view from the view resource pool to output the view content to the target second view for display includes the following steps:

[0161] Step S131, responding to a horizontal scroll instruction acting on the scroll view, determining a scroll direction of the horizontal scroll instruction:

[0162] Please refer to Fig.16 , the user who operates the current terminal can do so by Fig.16 After the left sliding operation event is executed in the visible window 1603 shown, a horizontal scroll instruction containing a left scroll direction will be triggered, so that the current terminal responds to the horizontal scroll instruction and determines that the scroll direction is the left scroll direction.

[0163] Step S132, determining whether the second view currently in the visible window has another second view in the scrolling direction, if so, switching the other second view to be displayed in the visible window, and triggering a content loading instruction acting on the second view:

[0164] Please refer to Fig.16 and Fig.17 , after the current terminal responds to the horizontal scroll instruction with the scroll direction being the left scroll direction, it will judge Fig.16 Is there another second view in the left scroll direction of the second view 1602 currently in the visible window 1603 shown, such as Fig.16 As shown, there is a second view 1604 in the left direction of the second view 1602, then the current terminal switches the second view 1602 in the visible window 1603 to the second view 1604, and after the switching is completed, Fig.17 As shown, Fig.17 The second view in the visible window 1701 is the second view 1703 shown, and the second view 1703 is Fig.16 Second view 1604 is shown.

[0165] Please refer to Fig.17 When the current terminal completes the switching of the second view in the visual window, the content loading instruction acting on the second view currently in the visual window will be triggered, that is, the content loading instruction acting on the second view in the visual window will be triggered. Fig.17 The content of the second view 1703 is shown loading instructions.

[0166] Step S133, obtaining the view content of the second view pointed to by the content loading instruction from the view resource pool, so as to output the view content to the second view currently in the visible window for display:

[0167] Please refer to Fig.17 and Fig.18, the current terminal response acts on Fig.17 After the content loading instruction of the second view 1703 is received, the view content of the second view 1703 is obtained from the view resource pool, so as to display the view content in the second view 1703. After the view content loading is completed, the second view 1703 will change to Fig.18 Second view 1801 is shown.

[0168] In this embodiment, the user slides the graphical user interface to switch the second view displayed in the graphical user interface, and the terminal obtains the view content of the switched second view from the view resource pool to load and display.

[0169] In one embodiment, please refer to Fig.16 , Fig.17 , Fig.18 and Fig. 20 , the step of responding to the content loading instruction, obtaining the view content corresponding to the target second view from the view resource pool, and outputting the view content to the target second view for display, includes the following steps:

[0170] Step S131', responding to the view option selection instruction acting on the second view navigation bar, determining the target second view corresponding to the view selection instruction:

[0171] Please refer to Fig.16 , the user who operates the current terminal can do so by Fig.16 After the selection operation of selecting the second view is performed in the second view navigation bar 1605 shown, the view option selection instruction acting on the selected second view option will be triggered, so that the current terminal responds to the view option selection instruction and determines the target second view selected by the operating user. For example, the second view option selected in the second view navigation bar shown is the "dynamic" second view option 1606.

[0172] Step S132', switching the second view currently displayed in the visible window to the target second view, and triggering the generation of a content loading instruction pointing to the target second view:

[0173] Please refer to Fig.16 and Fig.17 , the current terminal response acts on Fig.16 After the view option selection instruction of the second view option 1606 is selected, the Fig.16 The second view 1602 in the visual window 1603 shown in FIG. 1 is switched to the second view 1604. After the switching is completed, the Fig.17 As shown, Fig.17 The second view in the visible window 1701 is the second view 1703 shown, and the second view 1703 is Fig.16 The second view 1604 is shown, and Fig.17 The second view navigation bar 1704 shown in FIG. 1 will also be switched to a selected state for display.

[0174] Please refer to Fig.17 When the current terminal completes the switching of the second view in the visual window, the content loading instruction acting on the second view currently in the visual window will be triggered, that is, the content loading instruction acting on the second view in the visual window will be triggered. Fig.17 The content of the second view 1703 is shown loading instructions.

[0175] Step S133', in response to the content loading instruction, obtaining the view content of the target second view from the view resource pool, so as to output the view content to the target second view for display:

[0176] Please refer to Fig.17 and Fig.18 , the current terminal response acts on Fig.17 After the content loading instruction of the second view 1703 is received, the view content of the second view 1703 is obtained from the view resource pool, so as to display the view content in the second view 1703. After the view content loading is completed, the second view 1703 will change to Fig.18 Second view 1801 is shown.

[0177] In this embodiment, the user can switch the second view displayed in the graphical user interface through the second view navigation bar, and after the switching is completed, the current terminal will obtain the view content of the switched second view from the view resource pool for output display.

[0178] In one embodiment, please refer to Figures 6 to 9 and Fig.21 The step of responding to the vertical scrolling event acting on the current second view and calling a preset view scrolling algorithm to adjust the display effect of the first view according to the scrolling offset of the vertical scrolling event includes the following steps:

[0179] Step S141, in response to a vertical scrolling event acting on the second view currently displayed in the visual window, obtain a scrolling offset corresponding to the vertical scrolling event:

[0180] Please refer to Figure 7 , the user who operates the current terminal can Figure 7 The second view 701 shown in the figure performs a vertical sliding operation to trigger a vertical scrolling event acting on the second view 701 shown in the figure. The current terminal responds to the vertical scrolling event and obtains the scrolling offset value corresponding to the vertical sliding operation performed by the operating user on the second view 701, that is, the second view corresponding to Figure 7 The scroll offset value corresponding to the scroll offset origin 704 is shown.

[0181] Step S142, calculating the content scroll value of the view content of the second view from the content scroll origin according to the scroll offset, where the content scroll origin is determined based on the initial display position of the first view:

[0182] Please refer to Figure 7 After the current terminal obtains the scroll offset in response to the vertical scroll event of the second view currently displayed in the visual window, the content scroll value of the view content of the second view from the content scroll origin is calculated according to the scroll offset, and the content scroll origin is determined based on the initial display position of the first view, such as Figure 7 As shown, Figure 7 The content scrolling origin 705 shown is below the reserved height of the view shown, which indicates that the content scrolling value refers to the distance of the view content 708 from the content scrolling origin 705 shown in the second view 701, and the scrolling offset origin 704 shown corresponds to the scrolling offset value of the vertical scrolling event; correspondingly, the content scrolling value has a corresponding value formula as follows:

[0183] srollOffset=MAX((minTopSpace-topInset),-(topInset+verticalOffset))

[0184] Among them, srollOffset is the content scroll value, minTopSpace is Figure 7 The view content shown has a height limit and topInset of Figure 7 The view reserved height and verticalOffset shown are the scroll offset, and MAX means taking the largest value in the brackets as the content scroll value (srollOffset).

[0185] The current terminal calculates the corresponding content scroll value based on the scroll offset value to move the displayed view content 708 accordingly. When moving the view content 708, the displayed first view 706 and the second view navigation bar 707 will also be moved accordingly to adjust the display effect of the displayed first view 706 in the visible window accordingly.

[0186] Step S143, when the content scroll value is less than zero, it indicates that the view content displayed in the second view is scrolled upward, and the first view currently displayed in the visible window is synchronously shifted upward, and when the content scroll value satisfies the scrolling display rule of the information header content in the first view, the information header content is displayed in a reduced size in the visible window:

[0187] Please refer to Figure 6 , Figure 7 , Figure 8 and Fig. 9 When the content scroll value is less than zero, it indicates that the view content displayed in the second view is scrolled upward, such as Figure 7 As shown, the view content 708 is moved upward, and the first view 706 and the second view navigation bar 707 are synchronously shifted upward; and when the content scroll value meets the scroll display rule of the information header content in the first view, the information header content will be displayed in a reduced size in the visible window, such as Figure 8 As shown, Figure 7 The view content 708 shown in FIG. 7 changes to Figure 8 The view content 804 shown in the figure moves the distance of the content scroll value 802 shown in the figure, and satisfies the Figure 7 The scrolling display rule of the first view 706 is as follows: Figure 7 The first view 706 shown changes to Figure 8 The zoomed-out first view 806 shown corresponds to Figure 7 The second view navigation bar 707 shown in FIG. 7 has moved Figure 8 The content scrolling distance of value 802 shown changes to Figure 8 The second view navigation bar 803 shown in FIG. 803; please refer to Figure 6 and Fig. 9 , the information header content in the first view of the zoomed display is as follows Figure 6 The first view 603 shown in FIG. 6 changes to Fig. 9 The first view 901 shown is a zoomed-out display of the information header content displayed in the first view 603 .

[0188] Step S144, when the content scroll value is greater than zero, it indicates that the view content displayed in the second view is scrolled downward, and the first view currently displayed in the visible window is synchronously shifted downward. When the content scroll value satisfies the scrolling display rule of the background image in the first view, the background image is magnified and displayed in the visible window:

[0189] Please refer to Figure 6 , Figure 7 , Fig.10 and Fig.11 When the content scroll value is greater than zero, it indicates that the view content displayed in the second view is scrolled down, such as Figure 7As shown, the view content 708 is moved downward, and the first view 706 and the second view navigation bar 707 are synchronously shifted downward; and when the content scroll value meets the scroll display rule of the background image in the first view, the background image is magnified and displayed in the visible window, as shown in FIG. Fig.10 As shown, Figure 7 The view content 708 shown in FIG. 7 changes to Fig.10 The view content 1002 shown in FIG. 1002 moves the distance of the content scroll value 1001 shown in FIG. 1001 , and satisfies the requirement Figure 7 The scrolling display rule of the first view 706 is as follows: Figure 7 The first view 706 shown in FIG. 1001 is changed into the enlarged first view 1003 shown in FIG. 1001 . Figure 7 The second view navigation bar 707 shown in FIG. 7 has moved Fig.10 The content shown scrolls by a distance of 1001 and changes to Fig.10 The second view navigation bar 1004 shown in FIG. 1004; please refer to Figure 6 and Fig.11 The information header content in the first view displayed in an enlarged manner is as follows: Figure 6 The first view 603 shown in FIG. 6 changes to Fig.11 The first view 1101 shown in the figure enlarges and displays the background image shown in the first view 603 .

[0190] Furthermore, by functionalizing each step in the method disclosed in the above embodiments, a scroll view processing device of the present application can be constructed. According to this idea, please refer to Fig. 22 In a typical embodiment, the device includes: a first view loading module 11, which is used to respond to a view loading instruction acting on a scroll view, load a first view in a view level above the scroll view, and obtain a background image and information header content of the first view from a view resource pool and load them into the first view for display; a second view loading module 12, which is used to obtain second view group information from the view resource pool, so as to generate a corresponding second view navigation bar according to the number of second views and a plurality of second view identification information contained in the second view group information and load it into the same view level of the first view, and load the same number of second views as the number of second views into the scroll view; a view content loading module 13, which is used to respond to a content loading instruction, obtain a view content corresponding to the target second view from the view resource pool, and output the view content to the target second view for display; and a view display adjustment module 14, which is used to respond to a vertical scroll event acting on the current second view, and call a preset view scroll algorithm to adjust the display effect of the first view according to the scroll offset of the vertical scroll event.

[0191] In one embodiment, the first view loading module 11 includes: a content acquisition submodule, used to obtain the background image and information header content from the view resource pool, and obtain the scrolling display configuration acting on the background image and the information header content respectively; a content loading submodule, used to load the background image into the first information header view of the first view, and load the information header content into the second information header view of the first view, wherein the second information header view is located in the upper view level of the first information header view; a display setting submodule, used to set the scrolling display rules of the first information header view and the second information header view respectively according to the scrolling display configuration.

[0192] In one embodiment, the second view loading module 12 includes: a group information parsing submodule, used to obtain the number of second views and multiple second view identification information included in the second view group information, wherein the second view identification information includes view sorting information and view name; a navigation bar generating submodule, used to generate a second view navigation bar having a number of second view options that matches the number of second views, and according to the view sorting information included in each second view identification information, assigning the view name included in each second view identification information to the second view option at the corresponding position in the second view navigation bar; and a navigation bar loading submodule, used to load the second view navigation bar into the same view hierarchy of the first view.

[0193] In another embodiment, the second view loading module 12 further includes: a second view loading submodule, used to load, in the scroll view, a number of second views corresponding to the number of second views represented by the number of second views included in the second view group information; a view identifier assigning submodule, used to assign each view identifier to a corresponding second view in sequence according to the view sorting information and view identifier respectively included in a plurality of second view identifier information; and an option associating submodule, used to associate each second view in sequence with a second view option at a corresponding position in the second view navigation bar according to the sorting position of each second view.

[0194] In one embodiment, the view content loading module 13 includes: a scroll instruction response submodule, which is used to respond to the horizontal scroll instruction acting on the scroll view and determine the scroll direction of the horizontal scroll instruction; a content loading trigger submodule, which is used to determine whether there is another second view in the scroll direction of the second view currently in the visible window. If so, the other second view is switched to the visible window for display, and the content loading instruction acting on the second view is triggered to respond; a content loading submodule, which is used to obtain the view content of the second view pointed to by the content loading instruction from the view resource pool, so as to output the view content to the second view currently in the visible window for display.

[0195] In another embodiment, the view content loading module 13 also includes: a view selection submodule, which is used to respond to the view option selection instruction acting on the second view navigation bar, and determine the target second view corresponding to the view selection instruction; a content loading triggering submodule, which is used to switch the second view currently displayed in the visual window to the target second view, and trigger the generation of a content loading instruction pointing to the target second view; a content loading submodule, which is used to respond to the content loading instruction, obtain the view content of the target second view from the view resource pool, so as to output the view content to the target second view for display.

[0196] In one embodiment, the view display adjustment module 14 includes: a longitudinal scroll response submodule, which is used to respond to a longitudinal scroll event of a second view currently displayed in the visual window, and obtain a scroll offset corresponding to the longitudinal scroll event; a scroll value calculation submodule, which is used to calculate a content scroll value of the view content of the second view from a content scroll origin according to the scroll offset, wherein the content scroll origin is determined based on an initial display position of the first view; an upper scroll response submodule, which is used to indicate that when the content scroll value is less than zero, the view content displayed in the second view is scrolled upward, and the first view currently displayed in the visual window is synchronously displaced upward, and when the content scroll value satisfies the scroll display rule of the information header content in the first view, the information header content is displayed in a reduced size in the visual window; and a lower scroll response submodule, which is used to indicate that when the content scroll value is greater than zero, the view content displayed in the second view is scrolled downward, and the first view currently displayed in the visual window is synchronously displaced downward, and when the content scroll value satisfies the scroll display rule of the background image in the first view, the background image is displayed in an enlarged size in the visual window.

[0197] To solve the above technical problems, the present application also provides a computer device for running a computer program implemented according to the scroll view processing method. Fig.23 , Fig.23This is a basic structural block diagram of the computer device in this embodiment.

[0198] like Fig.23 As shown, a schematic diagram of the internal structure of a computer device. The computer device includes a processor, a non-volatile storage medium, a memory, and a network interface connected via a system bus. Among them, the non-volatile storage medium of the computer device stores an operating system, a database, and computer-readable instructions. The database may store a control information sequence. When the computer-readable instructions are executed by the processor, the processor can implement a scroll view processing method. The processor of the computer device is used to provide computing and control capabilities to support the operation of the entire computer device. The memory of the computer device may store computer-readable instructions. When the computer-readable instructions are executed by the processor, the processor can execute a scroll view processing method. The network interface of the computer device is used to connect and communicate with a terminal. Those skilled in the art will understand that Fig.23 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0199] In this embodiment, the processor is used to execute the specific functions of each module / submodule in the scroll view processing device of the present application, and the memory stores the program code and various data required to execute the above modules. The network interface is used to transmit data between the user terminal or the server. The memory in this embodiment stores the program code and data required to execute all modules / submodules in the scroll view processing device, and the server can call the program code and data of the server to execute the functions of all submodules.

[0200] The present application also provides a non-volatile storage medium, wherein the scroll view processing method is written into a computer program and stored in the storage medium in the form of computer-readable instructions. When the computer-readable instructions are executed by one or more processors, it means that the program is run in the computer, thereby enabling one or more processors to execute the steps of the scroll view processing method of any of the above-mentioned embodiments.

[0201] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0202] To sum up, the present application effectively improves the development efficiency of developers in developing high-load content pages, and facilitates developers to customize the view content output by each view in the web page. At the same time, by adjusting the display effect of the first view in the page, the user's browsing experience when browsing high-load content pages is improved.

[0203] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0204] Those skilled in the art will appreciate that the various operations, methods, steps, measures, and schemes in the processes discussed in this application may be alternated, altered, combined, or deleted. Further, other steps, measures, and schemes in the various operations, methods, and processes discussed in this application may also be alternated, altered, rearranged, decomposed, combined, or deleted. Further, the steps, measures, and schemes in the prior art that are similar to those disclosed in this application may also be alternated, altered, rearranged, decomposed, combined, or deleted.

[0205] The above description is only a partial implementation method of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A scroll view processing method, characterized in that: The steps include: In response to a view loading instruction acting on the scroll view, a first view is loaded in an upper view level of the scroll view, and a background image and information header content of the first view are obtained from a view resource pool and loaded into the first view for display; Acquire second view group information from the view resource pool, generate a corresponding second view navigation bar according to the number of second views and a plurality of second view identification information included in the second view group information, load the second view navigation bar into the same view hierarchy of the first view, and load the same number of second views as the number of the second views into the scroll view; In response to the content loading instruction, obtaining the view content corresponding to the target second view from the view resource pool, so as to output the view content to the target second view for display; In response to a vertical scrolling event acting on the current second view, calling a preset view scrolling algorithm to adjust the display effect of the first view according to the scrolling offset of the vertical scrolling event, includes the following steps: In response to a vertical scrolling event acting on a second view currently displayed in the visual window, obtaining a scrolling offset corresponding to the vertical scrolling event; Calculating a content scroll value of the view content of the second view from a content scroll origin according to the scroll offset, where the content scroll origin is determined based on an initial display position of the first view; When the content scroll value is less than zero, it indicates that the view content displayed in the second view is scrolled upward, and the first view currently displayed in the visible window is synchronously shifted upward. When the content scroll value satisfies the scrolling display rule of the information header content in the first view, the information header content is displayed in a reduced size in the visible window. When the content scroll value is greater than zero, it indicates that the view content displayed in the second view is scrolled downward, and the first view currently displayed in the visual window will be synchronously shifted downward. When the content scroll value satisfies the scrolling display rule of the background image in the first view, the background image will be displayed in an enlarged manner in the visual window.

2. The method according to claim 1, characterized in that The step of acquiring the background image and information header content of the first view from the view resource pool and loading them into the first view for display comprises the following steps: Acquire the background image and the information header content from the view resource pool, and acquire the scrolling display configuration acting on the background image and the information header content respectively; Loading the background image into a first information header view of the first view, and loading the information header content into a second information header view of the first view, wherein the second information header view is located in an upper view level of the first information header view; The scrolling display rules of the first information header view and the second information header view are respectively set according to the scrolling display configuration.

3. The method according to claim 1, characterized in that The step of generating a corresponding second view navigation bar according to the number of second views and a plurality of second view identification information included in the second view group information and loading the second view navigation bar into the same view level of the first view includes the following steps: Acquire the number of second views and a plurality of second view identification information included in the second view group information, wherein the second view identification information includes view sorting information and a view name; generating a second view navigation bar having the same number of second view options as the number of the second views, and assigning the view names contained in the respective second view identification information to the second view options at corresponding positions in the second view navigation bar according to the view sorting information contained in the respective second view identification information; Load the second view navigation bar into the same view hierarchy as the first view.

4. The method according to claim 3, characterized in that The step of loading the second views in the scroll view in a quantity equal to the quantity of the second views comprises the following steps: According to the second view number included in the second view group information, loading the second views in the scroll view in a number that matches the number represented by the second view number; assigning each of the view identifiers to a corresponding second view in sequence according to the view sorting information and the view identifier respectively included in the plurality of second view identifier information; According to the sorting position of each second view, each second view is sequentially associated with the second view option at the corresponding position in the second view navigation bar.

5. The method according to claim 1, characterized in that: The step of responding to the content loading instruction and acquiring the view content corresponding to the target second view from the view resource pool to output the view content to the target second view for display includes the following steps: In response to a horizontal scroll instruction acting on the scroll view, determining a scroll direction of the horizontal scroll instruction; Determine whether there is another second view in the scrolling direction of the second view currently in the visible window, and if so, switch the other second view to the visible window for display, and trigger a content loading instruction for the second view; The view content of the second view pointed to by the content loading instruction is obtained from the view resource pool, so as to output the view content to the second view currently in the visible window for display.

6. The method according to claim 1, characterized in that The step of responding to the content loading instruction and acquiring the view content corresponding to the target second view from the view resource pool to output the view content to the target second view for display includes the following steps: In response to a view option selection instruction acting on the second view navigation bar, determining a target second view corresponding to the view option selection instruction; Switching the second view currently displayed in the visual window to the target second view, and triggering the generation of a content loading instruction pointing to the target second view; In response to the content loading instruction, the view content of the target second view is obtained from the view resource pool, so as to output the view content to the target second view for display.

7. A scroll view processing device, characterized in that: include: A first view loading module, configured to respond to a view loading instruction acting on a scroll view, load a first view in a view level above the scroll view, and obtain a background image and information header content of the first view from a view resource pool and load them into the first view for display; a second view loading module, configured to obtain second view group information from the view resource pool, generate a corresponding second view navigation bar according to the number of second views and a plurality of second view identification information included in the second view group information, load the second view navigation bar into the same view level of the first view, and load the same number of second views as the number of the second views into the scroll view; A view content loading module, configured to respond to a content loading instruction, obtain the view content corresponding to the target second view from the view resource pool, and output the view content to the target second view for display; A view display adjustment module, configured to respond to a vertical scrolling event acting on the current second view and call a preset view scrolling algorithm to adjust the display effect of the first view according to a scrolling offset of the vertical scrolling event; The view display adjustment module includes: A vertical scroll response submodule, used to respond to a vertical scroll event acting on a second view currently displayed in the visual window, and obtain a scroll offset corresponding to the vertical scroll event; A scroll value calculation submodule, configured to calculate a content scroll value of the view content of the second view from a content scroll origin according to the scroll offset, wherein the content scroll origin is determined based on an initial display position of the first view; An upward scroll response submodule, for, when the content scroll value is less than zero, it is characterized as scrolling the view content displayed in the second view upward, then the first view currently displayed in the visual window will be synchronously shifted upward, and when the content scroll value satisfies the scroll display rule of the information header content in the first view, then the information header content will be displayed in a reduced size in the visual window; The downward scrolling response submodule is used to, when the content scrolling value is greater than zero, represent the view content displayed in the second view being scrolled downward, and the first view currently displayed in the visual window will be synchronously shifted downward, and when the content scrolling value meets the scrolling display rule of the background image in the first view, the background image will be displayed in an enlarged manner in the visual window.

8. The device according to claim 7, characterized in that The first view loading module includes: A content acquisition submodule, used to acquire the background image and information header content from the view resource pool, and to acquire scrolling display configurations acting on the background image and information header content respectively; a content loading submodule, configured to load the background image into a first information header view of the first view, and load the information header content into a second information header view of the first view, wherein the second information header view is located in an upper view level of the first information header view; The display setting submodule is used to set the scrolling display rules of the first information header view and the second information header view respectively according to the scrolling display configuration.

9. An electronic device, comprising a central processing unit and a memory, characterized in that: The central processing unit is used to call and run a computer program stored in the memory to execute the steps of the method according to any one of claims 1 to 6.

10. A non-volatile storage medium, characterized in that: It stores a computer program implemented according to the method described in any one of claims 1 to 6 in the form of computer-readable instructions, and when the computer program is called and executed by a computer, the steps included in the method are executed.

Images