List item anchor point positioning method and system based on bidirectional loading, program product, equipment and storage medium

Abstract

The invention provides a list item anchor point positioning method and system based on bidirectional loading, a program product, equipment and a storage medium, and relates to an anchor point positioning technology in a mobile equipment Html5 long list loading scene. The method comprises the following steps: receiving an anchor point identification request in response to user operation; a bidirectional loading strategy is adopted, and data blocks containing anchoring list items and front and back preset ranges of the anchoring list items are requested; rendering a list page, and rolling to an anchoring list item to complete anchor point positioning; and monitoring the rolling operation of the user, continuously triggering bidirectional loading, and supporting the user to seamlessly browse a complete list. According to the method and the device, the technical problem that anchor point positioning cannot touch the list item before the initial loading range due to a one-way loading mechanism in the prior art is effectively solved, accurate anchor point positioning of the list item at any position in the Html5 long list is realized, a user is supported to seamlessly browse the complete list content after anchor point positioning, and the user experience is improved. And the anchor point positioning browsing experience of the user under the scene of the long list of the Html5 page of the mobile equipment is obviously improved.

Description

Technical Field

[0001] The present invention relates to the technical field of computer software, and particularly to a method, system, program product, device and storage medium for list item anchor positioning based on bidirectional loading. Background Art

[0002] In mobile device Html5 pages (h5 pages), long lists are widely used for information display, and list item anchor positioning technology has emerged to help users quickly locate to a specified list item. Users enter the page through a link with an anchor identifier and expect the page to automatically scroll to the target position after loading to conveniently view the key content.

[0003] Currently, the commonly used anchor positioning technologies for mobile device Html5 pages are mostly based on a unidirectional loading mechanism. Unidirectional loading means that list data is loaded unidirectionally from the starting position to the end. Such anchor positioning technologies usually request initial data when the page is loaded. After rendering the list, they scroll to the target item according to the anchor identifier. However, there are limitations in the anchor positioning of the unidirectional loading mechanism. The problem is that unidirectional loading only supports unidirectional loading of list data and cannot load data before the initial position upward. When users need to anchor to a list item in the front or non-first screen position of the list, the unidirectional loading technology cannot obtain the data information before the target item, resulting in the failure of anchor positioning.

[0004] This limitation seriously affects the user experience. Especially in the page sharing scenario, users expect to quickly locate and view a specific list item pointed to by the sharing link. If the target item is in the front position of the list, the unidirectional loading anchor technology cannot meet the demand, and users still need to manually search, which is cumbersome.

[0005] Therefore, there is an urgent need for a new technical solution to overcome the limitations of unidirectional loading, achieve precise anchor positioning of list items at any position in the Html5 long list, and support seamless browsing of the entire list after user anchor positioning, so as to improve the user experience of the Html5 long list on mobile devices.

[0006] It should be noted that the information disclosed in the above background art section is only used to enhance the understanding of the background of the present invention, and therefore may include information that does not constitute the prior art known to those of ordinary skill in the art. Summary of the Invention

[0007] Aiming at the problems in the prior art, the present invention provides a method for list item anchor positioning based on bidirectional loading, aiming at the long list loading scenario of mobile device Html5 pages, so as to overcome the limitations existing in the list item anchor positioning method based on the unidirectional loading mechanism in the prior art.

[0008] An embodiment of the present invention provides a method for list item anchor positioning based on bidirectional loading, which is applied to the loading of long Html5 lists on mobile devices, and includes the following steps:

[0009] In response to a user operation, receive a request containing a list item anchor identifier;

[0010] In response to the request, request from the server a data block including the anchored list item corresponding to the list item anchor identifier and data within a predetermined range before and after it in the list sequence;

[0011] Receive and render the list item data returned by the server, generate an Html5 list page, and scroll the list to a predetermined position of the anchored list item within the user's visible area to complete anchor positioning;

[0012] Monitor the user's continuous scrolling operation, and according to the scrolling direction of the user operation, continuously trigger the process of loading list data upward or downward, so as to support the user to seamlessly browse the complete list content before and after the anchored list item on the basis of anchor positioning, so as to realize the continuous loading of the long Html5 list.

[0013] In some alternative embodiments, the step of scrolling the list to a predetermined position of the anchored list item within the user's visible area to complete anchor positioning includes at least one of the following:

[0014] When making an initial data request, pre-request to load at least one page of list data adjacent to the anchored list item before and after;

[0015] During the user's scrolling and browsing process, dynamically adjust the number of pages of pre-loaded list data according to the user's sliding speed and direction.

[0016] In some alternative embodiments, the step of scrolling the list to a predetermined position of the anchored list item within the user's visible area to complete anchor positioning includes at least one of the following:

[0017] Scroll the anchored list item to the top position of the Html5 list page; or

[0018] Scroll the anchored list item to the middle position of the Html5 list page; or

[0019] Scroll the anchored list item to a predetermined position offset relative to the edge of the user's viewport in the Html5 list page.

[0020] In some alternative embodiments, the process of continuously triggering the upward or downward loading of list data includes:

[0021] When the user scrolls up to the top of the Html5 list page and exceeds a preset distance threshold, trigger the upward loading of list data;

[0022] When the user scrolls down to the bottom of the Html5 list page and exceeds the preset distance threshold, it triggers the downward loading of list data.

[0023] In some alternative embodiments, it further includes a caching step, and the caching step is as follows:

[0024] Cache the loaded list item data on the mobile device. When requesting to load the list data in the same range again, preferentially read it from the cache.

[0025] In some alternative embodiments, the caching step includes:

[0026] Generate a cache key value according to the page number or index range of the list data;

[0027] Use the client-side local storage technology to store the list item data corresponding to the cache key value;

[0028] Set the expiration period of the cached data. After the expiration period, the cache will automatically expire.

[0029] The embodiment of the present invention also provides a list item anchor positioning system based on two-way loading, which is applied to the Html5 long list loading of a mobile device and is used to implement the above-mentioned list item anchor positioning method based on two-way loading. The system includes:

[0030] Request receiving module: used to receive a request containing the list item anchor identifier in response to a user operation;

[0031] Data request module: used to request from the server a data block including the anchored list item corresponding to the list item anchor identifier and the data within a predetermined range before and after it in the list sequence in response to the request, and adopt a two-way loading strategy to allow, during and after the anchor positioning process, according to the user's browsing operation, request to load list data upward and downward;

[0032] Rendering and positioning module: used to receive and render the list item data returned by the server, generate an Html5 list page, and scroll the list to a predetermined position within the user's visible area of the anchored list item to complete the anchor positioning;

[0033] Two-way loading module: used to monitor the continuous scrolling operation of the user, and continuously trigger the process of loading list data upward or downward according to the scrolling direction of the user operation, so as to support the user to seamlessly browse the complete list content before and after the anchored list item to achieve the continuous loading of the Html5 long list.

[0034] The embodiment of the present invention also provides a list item anchor positioning program product. The program product includes computer instructions, and when the computer instructions are executed by a processor, the steps of the above method are implemented.

[0035] An embodiment of the present invention further provides a list item anchor positioning device based on bidirectional loading, including:

[0036] A processor;

[0037] A memory storing executable instructions of the processor;

[0038] Wherein, the processor is configured to execute the steps of the above-mentioned list item anchor positioning method based on bidirectional loading by executing the executable instructions.

[0039] An embodiment of the present invention further provides a computer-readable storage medium for storing a program, and when the program is executed by a processor, the steps of the above-mentioned list item anchor positioning method based on bidirectional loading are implemented.

[0040] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present disclosure.

[0041] The list item anchor positioning method, system, program product, device and storage medium of the present invention have the following beneficial effects:

[0042] Breaking through the anchor position limitation and expanding the application scope. The present invention adopts a bidirectional loading mechanism, completely removing the limitation of the traditional unidirectional loading anchor positioning technology on the anchor position, so that the anchor positioning is no longer limited to the initial loading range of the list, and can support the anchor positioning of list items at any position in the Html5 long list, greatly expanding the application scenarios and applicable scopes of the anchor positioning technology.

[0043] Achieving accurate and fast positioning and improving user efficiency. By preloading the data near the anchor item and combining page rendering and scrolling control technologies, the present invention can achieve more accurate and faster anchor positioning. After the user enters the page, they can immediately jump to the target list item, significantly improving the user positioning efficiency and saving the user's time and operation costs.

[0044] Optimizing the user browsing experience and making the operation smooth and natural. On the basis of realizing anchor positioning, the present invention fully considers the user interaction experience, and adopts a bidirectional loading mechanism to support the user to seamlessly slide up and down to browse the complete content of the list after anchor positioning. The operation is smooth and natural, conforms to the user's usage habits, and improves the user's browsing comfort and satisfaction in the long list scenario.

[0045] Enhancing the scene applicability and improving the user value. The present invention is particularly applicable to application scenarios such as page distribution that require quick positioning to specific content, can effectively solve the limitations of the prior art in these scenarios, provide more efficient and convenient anchor positioning services for users, and improve the user value and application value of the Html5 long list page. Description of the Drawings

[0046] Other features, objects, and advantages of the present invention will become more apparent from the following detailed description of non - limiting embodiments read in conjunction with the accompanying drawings.

[0047] Figure 1 is a flowchart of a method for anchor point positioning of list items based on bidirectional loading according to an embodiment of the present invention;

[0048] Figure 2 Schematic diagram of the view structure for anchor point positioning of list items based on bidirectional loading according to an embodiment of the present invention;

[0049] Figure 3 is a schematic diagram of the system structure for anchor point positioning of list items based on bidirectional loading according to an embodiment of the present invention;

[0050] Figure 4 is a schematic diagram of the structure of a device for anchor point positioning of list items based on bidirectional loading according to an embodiment of the present application;

[0051] Figure 5 is a schematic diagram of the structure of a computer - readable storage medium according to an embodiment of the present application. Detailed implementation manners

[0052] Example embodiments will now be described more fully with reference to the accompanying drawings. However, the example embodiments can be implemented in various forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more complete and comprehensive, and will fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments.

[0053] The flowcharts shown in the accompanying drawings are merely illustrative and not necessarily include all steps. For example, some steps can be decomposed, while some steps can be combined or partially combined. Therefore, the actual execution order may change according to the actual situation. Some of the block diagrams shown in the accompanying drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0054] The present invention aims to solve the limitation problems existing in the list item anchor positioning method based on the unidirectional loading mechanism in the scenario of Html5 long list loading on mobile devices. A bidirectional data loading mechanism is introduced to break through the inherent constraints of unidirectional loading. In the traditional unidirectional loading mode, the data flow is usually limited to a unidirectional extension from the start end to the end of the list. When it is necessary to locate a specific item beyond the initial loading range in the list, due to the lack of reverse data loading ability, the system cannot obtain the list content before the target anchor point, resulting in the failure of the anchor point positioning function. The principle of the bidirectional loading technology breaks this limitation of the unidirectional data flow, making the data loading no longer limited to a single direction, but allowing the data flow to expand in both directions of the list. This means that the system can not only load data from the start end to the end of the list (i.e., the traditional downward loading), but more importantly, it also has the ability to load data in the reverse direction from the current position to the start end of the list (i.e., upward loading). By endowing the list with the ability of bidirectional data loading, when receiving an anchor point positioning request, the system is no longer limited by the initial loaded data range, but can flexibly load data as needed in both directions of the list according to the anchor point identifier, so as to ensure that the target anchor point item and its surrounding context information can be effectively obtained and presented. The logical relationship between this bidirectional data loading principle and solving the limitation problem of anchor point positioning is that it fundamentally overcomes the data acquisition bottleneck of the unidirectional loading mechanism, enabling the system to access and process data at any position in the list, laying a technical foundation for realizing accurate and comprehensive list item anchor point positioning. The present invention can effectively break through the inherent limitations of the unidirectional loading mechanism in the application of list item anchor point positioning, and significantly expand the effective range of anchor point positioning. The method adopting this technical principle can realize the accurate positioning of target entries at any position in the long list and provide users with a more complete and coherent list browsing experience.

[0055] As Figure 1 shown, the present invention provides a method for list item anchor point positioning based on bidirectional loading, which is applied to the Html5 long list loading of mobile devices and aims to effectively overcome the inherent technical limitation in the prior art that the unidirectional loading mechanism cannot effectively anchor to list items before the initial loading range. The method includes the following steps:

[0056] S100. In response to a user operation, receive a request containing an anchor identifier for a list item. In the technical field of the present invention, user operations cover various behaviors of a user interacting with an Html5 page of a mobile device, such as a user clicking on a page link, scanning a QR code, or entering a specific URL through the browser address bar. The anchor identifier for a list item is a key parameter passed during these user operations, and in the embodiments of the present invention, it specifically refers to the identification information used to uniquely determine a specific list item that the user expects to locate. For example, it can be the business ID of the list item, the index value in the list data, or other attributes that can uniquely identify the list item. Receiving a request containing an anchor identifier for a list item means that the method of the present invention uses the request received from the user operation and carrying a specific anchor identifier as the trigger condition for starting the anchor positioning process.

[0057] S200. In response to the request, request from the server a data block including the anchored list item corresponding to the anchor identifier for the list item and the data within a predetermined range before and after it in the list sequence. Among them, the two-way loading strategy allows, during and after the anchor positioning process, according to the user's browsing operation, to load the list data before the anchored list item upward and the list data after the anchored list item downward. In the embodiments of the present invention, the server generally refers to the background server system that provides data support for the Html5 page of the mobile device in the technical field. The anchored list item refers to the target list item that the user expects to locate and corresponds to the received anchor identifier for the list item. The data block within a predetermined range before and after it in the list sequence means that in the initial data request of the embodiments of the present invention, not only a single piece of data of the anchored list item is requested, but also, centered around the anchored list item, multiple list item data within a certain range before and after it in the list sequence are requested simultaneously, in order to provide necessary context information for subsequent anchor positioning and user browsing. The two-way loading strategy specifically refers to a data loading mode that is completely different from the traditional one-way loading mechanism in the embodiments of the present invention. It lies in allowing data loading to occur in two directions in the list sequence, that is, not only can the list data after the anchored list item be loaded (downward loading), but more importantly, it breaks through the limitation of one-way loading and realizes the ability to load the list data before the anchored list item upward. This two-way loading strategy fundamentally solves the technical problem in the prior art that the data before the anchor item cannot be obtained due to the one-way loading mechanism, enabling the present invention to effectively overcome the limitations of the prior art in the anchor positioning range.

[0058] S300. Receive and render the list item data returned by the server, generate an Html5 list page, scroll the list to a predetermined position of the anchored list item within the user's visible area, and complete the anchor positioning. In the embodiment of the present invention, receiving and rendering the list item data returned by the server and generating an Html5 list page means that after the Html5 page client of the mobile device receives the list item data returned by the server, it uses front-end rendering technology such as JavaScript dynamic rendering to convert the data into a visible Html5 list page for the user. Scrolling the list to a predetermined position of the anchored list item within the user's visible area means that after the Html5 list page is rendered, the page scroll bar can be controlled, for example, by using the scrollTo() method of JavaScript, to accurately scroll the anchored list item to a preset position within the user's current viewport, such as the top of the list, the middle of the list, or a specific offset position relative to the edge of the viewport, so as to achieve the initial anchor jump and positioning. Completing the anchor positioning indicates that the method of the present invention has successfully guided the user to the desired target list item and completed the core function of anchor positioning.

[0059] S400. Listen for the user's continuous scrolling operation, and continuously trigger the process of loading list data upward or downward according to the scrolling direction of the user's operation, so as to support the user to seamlessly browse the complete list content before and after the anchored list item on the basis of anchor positioning, realize the continuous loading of the Html5 long list, and improve the user's anchor positioning browsing experience in the long list scenario of the mobile device Html5 page. This step reflects the further technical improvement and user experience optimization in the embodiment of the present invention on the basis of anchor positioning. Listening for the user's continuous scrolling operation and continuously triggering the process of loading list data upward or downward according to the scrolling direction of the user's operation means that after the initial anchor positioning is completed, the method of the present invention does not stop data loading, but continuously listens for the user's list scrolling behavior, and dynamically triggers the upward or downward loading of more list data according to the user's upward or downward operation, so as to realize the on-demand loading and infinite extension of the list data. Supporting the user to seamlessly browse the complete list content before and after the anchored list item on the basis of anchor positioning and realizing the continuous loading of the Html5 long list means that on the basis of anchor positioning, the user can still freely scroll up or down to browse the list, continuously load and view the complete list content before and after the anchored list item, thus ensuring the integrity of the user's information acquisition and the coherence of the browsing experience. Achieving the ultimate technical goal of the present invention, that is, through the synergistic effect of the above series of technical features, the ultimate aim is to improve the user's anchor positioning browsing experience in the long list scenario of the mobile device Html5 page.

[0060] In summary, through the mutual cooperation and synergistic effect of the above technical features, the embodiment of the present invention innovatively introduces a two-way loading strategy, fundamentally breaking through the technical bottleneck of the traditional one-way loading mechanism in the application of list item anchor positioning, effectively solving the technical problem that the prior art cannot anchor to list items before the initial loading range, and achieving accurate and efficient anchor positioning of list items at any position in the Html5 long list.

[0061] In some embodiments, the step of scrolling the list to a predetermined position of the anchored list item within the user's visible area to complete the anchor positioning includes at least one of the following:

[0062] When initially requesting data, pre-request to load at least one page of list data adjacent to the anchored list item before and after;

[0063] During the user's scrolling and browsing process, dynamically adjust the number of pages of pre-loaded list data according to the user's sliding speed and direction.

[0064] Among them, when initially requesting data, pre-requesting to load at least one page of list data adjacent to the anchored list item before and after means that after receiving a request containing the list item anchor identifier, in addition to requesting the data block containing the anchored list item, one or more pages of list data before and / or after the anchored list item are additionally requested. Here, "one page" refers to a set of list data divided by the server according to a certain quantity (such as 10 items, 20 items). The purpose of this move is to provide richer context information for users during initial anchor positioning and reduce the possibility of frequently requesting data due to subsequent scrolling operations. The number of pre-loaded data pages can be configured according to actual needs. For example, it can be set to a fixed value or dynamically adjusted according to factors such as device performance and network conditions. For example, when the network condition is good, more data pages can be pre-loaded to improve the user experience; when the network condition is poor, the number of pre-loaded data pages can be reduced to save traffic and reduce the loading time. During the user's scrolling and browsing process, dynamically adjusting the number of pages of pre-loaded list data according to the user's sliding speed and direction means that when the user scrolls the list, the system will dynamically adjust the number of pages of pre-loaded list data according to the user's sliding speed and direction. For example, when the user quickly swipes up, the system can judge that the user may need to quickly browse the content at the head of the list, so the number of pages pre-loaded upward can be increased; when the user slowly scrolls down, the system can judge that the user may just want to carefully browse the current content, so the number of pages pre-loaded downward can be reduced. This strategy of dynamically adjusting the number of pre-loaded data pages can provide more intelligent data support according to the user's actual browsing behavior and improve the user experience. The sliding speed can be obtained by listening to the scroll event and calculating the distance scrolled within a unit time. The sliding direction can be judged by comparing the previous and subsequent scroll positions.

[0065] By preloading the number of list data pages adjacent to the anchor list item before and after and dynamically adjusting the preloaded number of pages according to the user's scrolling behavior, the waiting time of the user when browsing the list can be effectively reduced, the smoothness of the list scrolling can be improved, and thus the user experience can be further enhanced. This technical means can significantly reduce the network latency caused by frequent data requests and improve the response speed of the Html5 long list.

[0066] In some embodiments, the step of completing the anchor positioning by scrolling the list to a predetermined position of the anchor list item within the user's visible area includes at least one of the following: scrolling the anchor list item to the top position of the Html5 list page; or scrolling the anchor list item to the middle position of the Html5 list page; or scrolling the anchor list item to a predetermined position offset relative to the edge of the user's viewport in the Html5 list page. Among them, scrolling the anchor list item to the top position of the Html5 list page means that after the list is rendered, by adjusting the position of the scroll bar, the anchor list item is displayed closely to the top of the Html5 list page. This method can ensure that the user can see the complete content of the anchor list item at the first time and is applicable to scenarios where the user needs to quickly focus on the target list item. The implementation method can be to use the `scrollTo()` method in JavaScript to calculate the offset of the anchor list item from the top of the list and then scroll the scroll bar to that position. Scrolling the anchor list item to the middle position of the Html5 list page means that the anchor list item is displayed in the middle position of the Html5 list page. This method can provide a better visual balance and facilitate the user to browse the anchor list item and the content above and below it at the same time. The implementation method can also be through the `scrollTo()` method, calculating the offset of the anchor list item from the top of the list and subtracting half of the screen height, and then scrolling the scroll bar to that position. Scrolling the anchor list item to a predetermined position offset relative to the edge of the user's viewport in the Html5 list page means that the anchor list item is displayed at a certain distance from the top or bottom of the user's viewport. This predetermined position can be adjusted according to actual needs. For example, it can be set to a position 1 / 4 of the screen height from the top, or a position 1 / 3 of the screen height from the bottom. This method can balance the user's attention to the anchor list item and the need to browse the context information. The implementation method can be through the `scrollTo()` method, calculating the offset of the anchor list item from the top of the list and adding or subtracting the preset offset, and then scrolling the scroll bar to that position.

[0067] By scrolling the anchored list items to different predetermined positions, the needs of different users' browsing habits and application scenarios can be met. Placing the anchored list items at the top enables users to quickly focus on the target content; placing them in the middle takes into account the browsing of context information; while placing them at a position offset from the edge of the viewport can maximize the display of the surrounding content while ensuring the visibility of the target content. These different positioning methods can improve the flexibility and satisfaction of users when using Html5 long lists.

[0068] In some embodiments, the process of continuously triggering the upward or downward loading of list data includes: when the user scrolls up to the top of the Html5 list page and exceeds the preset distance threshold, triggering the upward loading of list data; when the user scrolls down to the bottom of the Html5 list page and exceeds the preset distance threshold, triggering the downward loading of list data. Among them, when the user scrolls up to the top of the Html5 list page and exceeds the preset distance threshold, triggering the upward loading of list data means that when the user is browsing the Html5 list page, if they slide the screen upward so that the top of the list reaches the top of the visible area and continue to slide upward beyond a certain distance threshold, it is determined that the user needs to view the data before the top of the list, thereby triggering the operation of upward loading list data. The setting of the distance threshold is to avoid frequent triggering of loading operations due to users' accidental operations or slight slides, and it can be set to a fixed pixel value such as 50 pixels, 100 pixels, or a percentage of the screen height such as 5%, 10%. Triggering the upward loading of list data can be achieved by using JavaScript to listen for scroll events and calculate the distance between the top of the list and the top of the visible area in real time. When the distance is less than or equal to the negative distance threshold, a request is sent to the server to obtain the data of the previous page.

[0069] When the user scrolls down to the bottom of the Html5 list page and exceeds the preset distance threshold, triggering the downward loading of list data means that when the user is browsing the Html5 list page, if they slide the screen downward so that the bottom of the list reaches the bottom of the visible area and continue to slide downward beyond a certain distance threshold, the system determines that the user needs to view the data after the bottom of the list, thereby triggering the operation of downward loading list data. The purpose of setting the distance threshold is the same as when sliding upward, which is to avoid frequent triggering of loading operations due to users' accidental operations or slight slides. Triggering the downward loading of list data can also be achieved by using JavaScript to listen for scroll events and calculate the distance between the bottom of the list and the bottom of the visible area in real time. When the distance is less than or equal to the distance threshold, a request is sent to the server to obtain the data of the next page.

[0070] By setting a distance threshold and listening for the user's sliding operation, intelligent two-way loading can be achieved. Only when the user clearly needs to view more data will the loading operation be triggered, avoiding unnecessary traffic consumption and performance loss. This technical means can load data more precisely according to the user's actual browsing needs, enhancing the user experience.

[0071] In some embodiments, it further includes a caching step. The caching step is as follows: Cache the loaded list item data on the mobile device. When requesting to load the list data within the same range again, first read from the cache. Among them, caching the loaded list item data on the mobile device means storing the list item data that has been requested from the server and rendered in the local storage medium of the mobile device, such as localStorage, sessionStorage of the browser, or the database in the mobile application. The purpose of caching is to avoid repeatedly requesting the server when the user browses the same content later, thereby improving the loading speed and reducing traffic consumption. Caching can be stored in the form of key-value pairs, where the key can be the requested URL, parameter combination, or other strings that can uniquely identify the request, and the value is the list item data returned by the server.

[0072] When requesting to load the list data within the same range again, first read from the cache, which means that before initiating a new data request, first check whether there is data corresponding to this request in the local cache. If it exists, directly read the data from the cache and render it on the page without sending a request to the server. Only when the corresponding data does not exist in the cache will a request be sent to the server. Prioritizing reading data from the cache can significantly improve the page loading speed, especially in cases where the network condition is poor or the server response is slow.

[0073] By caching the loaded list item data on the local mobile device and prioritizing reading from the cache when requesting the same range of data again, the number of network requests can be effectively reduced, the page loading speed can be improved, the traffic consumption can be reduced, and thus the user experience can be improved. This technical means is particularly effective in a weak network environment and can significantly enhance the usability and response speed of Html5 long lists.

[0074] In some embodiments, the caching step includes: generating a cache key value according to the page number or index range of the list data; using the client local storage technology to store the list item data corresponding to the cache key value; setting the expiration period of the cache data, and after the expiration period, the cache will automatically expire. Among them, generating a cache key value according to the page number or index range of the list data means that in order to facilitate the search and management of cache data, a unique key value needs to be generated for each piece of cache data. This key value can be generated based on the page number of the list data, the index range, or other attributes that can uniquely identify the data block. For example, if the list data is paged with 10 records per page, then the page number can be used as the cache key value, such as "page_1", "page_2", etc. If the list data does not have a clear pagination, the key value can be generated according to the index range of the list items, such as "index_0_9", "index_10_19", etc. The generation method of the key value can be selected according to the actual situation, but uniqueness and traceability need to be ensured. Using the client local storage technology to store the list item data corresponding to the cache key value means storing the generated cache key value and the corresponding list item data in the local storage medium of the client. The client local storage technology includes various options, such as the browser's localStorage, sessionStorage, IndexedDB, or the SQLite database, file system, etc. in mobile applications. Different storage technologies have different characteristics and application scenarios, and can be selected according to actual needs. For example, localStorage is suitable for storing a small amount of long-term valid data, sessionStorage is suitable for storing a small amount of temporary data, and IndexedDB is suitable for storing a large amount of structured data. Selecting the appropriate storage technology can improve the efficiency and reliability of the cache.

[0075] Setting the expiration period of the cache data, and after the expiration period, the cache will automatically expire means that in order to avoid the expiration or invalidation of the cache data, an expiration period needs to be set for each piece of cache data. After the expiration period, the cache data will automatically expire and needs to be requested again from the server. The setting of the expiration period can be adjusted according to the update frequency and importance of the data. For example, for data with a high update frequency, the expiration period can be set shorter; for data with a low update frequency, the expiration period can be set longer. The implementation method of the expiration period can be to add a timestamp to each piece of cache data and check whether the timestamp exceeds the expiration period when reading the cache data.

[0076] Through the above caching steps, effective caching and management of Html5 long list data can be achieved, improving the page loading speed, reducing traffic consumption, and ensuring the timeliness of the data. This technical means can significantly improve the user experience, especially in the case of unstable network conditions or frequent data updates.

[0077] As shown Figure 2 in the figure, it is a schematic diagram of the list item anchor positioning view structure based on bidirectional loading according to another embodiment of the present invention. As Figure 2 shown in the figure, the box marked with the sticky tab at the top represents the sticky navigation bar of the Html5 list page. The boxes arranged in sequence below it, such as the boxes marked 60, 61, 62, 63, 64, represent several list items in the Html5 long list. These list items are identified by digital serial numbers in this embodiment. For example, 60 represents the list item ranked 60th.

[0078] According to the method of the present invention, S100: In response to a user operation, receive a request containing a list item anchor identifier. In this embodiment, it is assumed that the user initiates a request containing a list item anchor identifier through an operation such as clicking an external link or scanning a QR code. This anchor identifier is, for example, 61, representing that the user expects to locate to the list item ranked 61st.

[0079] S200: In response to the request, request from the server a data block containing the anchored list item corresponding to the list item anchor identifier and the data within a predetermined range before and after it in the list sequence. As Figure 2 shown in the left part, when receiving a request containing the anchor identifier 61, the Html5 page client will initiate a data request to the server. The requested data range includes not only the data of the anchor list item 61 itself, but also the list item data within a predetermined range before and after it. For example, it includes the list item data ranked from 60th to 64th. By using the data block within a predetermined range before and after, it can ensure that the initially loaded data contains both the anchor list item and certain context information, providing a data basis for subsequent anchor positioning and user browsing.

[0080] S300: Receive and render the list item data returned by the server, generate an Html5 list page, and scroll the list to a predetermined position within the user's visible area of the anchored list item to complete the anchor positioning. As Figure 2 shown in the part where the next page loading is triggered, when the client receives the data of list items 60 to 65 returned by the server, it will be rendered to generate an Html5 list page, and scroll the list to a predetermined position within the user's visible area of the anchor list item 61. For example, as shown in the figure, scroll the list item 61 to the position immediately below the sticky tab navigation bar, that is, the top position of the list, thus completing the initial anchor positioning and realizing the user's quick access to the anchor list item 61.

[0081] The S400 monitors the user's continuous scrolling operation, and according to the scrolling direction of the user operation, continuously triggers the process of loading list data upward or downward, so as to support the user to seamlessly browse the complete list content before and after the anchored list item on the basis of anchor positioning, so as to realize the continuous loading of the Html5 long list. As Figure 2 As shown in the process of triggering the previous page loading, when the user continues to slide the list upward after anchor positioning, if the user slides to the top of the list and it is detected that the user continues to slide upward (such as a pull-down operation), the process of loading list data upward will be triggered. At this time, the client will request the server to load the list data before the anchor list item 61, such as the list item data ranked from the 55th to the 58th, and insert the newly loaded data into the head of the list, thus realizing the upward loading. Similarly, as Figure 2 As shown in the process of triggering the next page loading, when the user continues to slide the list downward after anchor positioning, if the user slides to the bottom of the list and it is detected that the user continues to slide downward, the process of loading list data downward will be triggered. At this time, the client will request the server to load the list data after the anchor list item 64, such as the list item data ranked 65th and later, and append the newly loaded data to the tail of the list, thus realizing the downward loading. Through this two-way loading mechanism, the user can continuously scroll up or down for browsing on the basis of anchor positioning, continuously load the context data of the list, realize the continuous loading of the Html5 long list, and ensure that the user can seamlessly browse the complete list content before and after the anchor list item.

[0082] As Figure 3 shown, the embodiment of the present invention also provides a list item anchor positioning system based on two-way loading, which is applied to the Html5 long list loading of a mobile device and is used to implement the foregoing list item anchor positioning method based on two-way loading. The system includes: a request receiving module M100, a data request module M200, a rendering and positioning module M300, and a two-way loading module M400.

[0083] The request receiving module M100 is used to receive a request containing a list item anchor identifier in response to a user operation. This module is responsible for receiving the anchor positioning request initiated by the user in various ways such as URL parameters, scanning codes, etc., and extracting the key information for identifying the target list item, that is, the anchor identifier. The request receiving module M100 is the entry of the entire system, and its accuracy and efficiency directly affect the smooth progress of the subsequent process. This module can be implemented using an event listening mechanism such as JavaScript, listening to events such as `onload`, `DOMContentLoaded`, etc., and parsing the URL parameters or other request sources when the event is triggered to extract the anchor identifier.

[0084] The data request module M200 is used to request, in response to a request, from the server the anchored list items corresponding to the list item anchor identifiers and the data blocks within a predetermined range before and after them in the list sequence, and adopts a two-way loading strategy, allowing, during and after the anchor positioning process, according to the user's browsing operations, to request to load list data upward and downward. This module initiates a data request to the server based on the anchor identifier provided by the request receiving module M100, requesting the anchored list items and the data within a certain range before and after them. This module is also responsible for implementing the two-way loading strategy, that is, dynamically loading more data upward or downward according to the user's scrolling operation. The data request module M200 is the core of the entire system, and its performance and stability directly affect the user experience. This module can be implemented using technologies such as XMLHttpRequest, Fetch API, etc., and can adopt asynchronous programming models such as Promise, async / await, etc. to improve efficiency.

[0085] The rendering and positioning module M300 is used to receive and render the list item data returned by the server, generate an Html5 list page, and scroll the list to a predetermined position of the anchored list item within the user's visible area to complete the anchor positioning. This module receives the list item data returned by the server and renders it into a list page using Html5 technology. After the rendering is completed, this module is responsible for scrolling the list to a predetermined position of the anchored list item within the user's visible area to complete the anchor positioning. The rendering and positioning module M300 is the bridge connecting the data and the server, and its rendering efficiency and positioning accuracy directly affect the user experience. This module can be implemented using, for example, the DOM operation API of JavaScript, and can adopt optimization technologies such as virtual DOM, list reuse, etc. to improve the rendering efficiency.

[0086] The two-way loading module M400 is used to monitor the user's continuous scrolling operation, and according to the scrolling direction of the user's operation, continuously trigger the process of loading list data upward or downward to support the user to seamlessly browse the complete list content before and after the anchored list item, so as to achieve the continuous loading of the Html5 long list. This module monitors the user's scrolling operation and determines whether to load more data upward or downward according to the scrolling direction. If more data needs to be loaded, it triggers the data request module M200 to initiate a new data request. The two-way loading module M400 is the key to achieving seamless browsing, and its sensitivity and accuracy directly affect the user experience. This module can be implemented using, for example, the `scroll` event listener of JavaScript, and can adopt technologies such as throttling, debouncing, etc. to optimize the performance.

[0087] Through the collaborative work of the above modules, the present invention can achieve precise anchor point positioning for list items at any position in the Html5 long list, and support users to seamlessly browse the complete list content on this basis. The system has the advantages of high efficiency, stability, easy expansion, etc., and can significantly improve the user experience. Compared with the traditional one-way loading anchor point positioning system, the present invention can provide a smoother and more comprehensive information browsing experience, and is applicable to various application scenarios that require anchor point positioning and continuous browsing.

[0088] The present invention provides a program product for list item anchor point positioning based on two-way loading, characterized in that the program product includes computer instructions, and when the computer instructions are executed by a processor, the steps of the foregoing method for list item anchor point positioning based on two-way loading are implemented. Among them, the program product refers to a computer program that can implement specific functions, and can be software, firmware or other forms of executable code. In the embodiments of the present invention, the program product refers to software containing computer instructions, and these instructions can control a computer to execute a series of operations, so as to implement the method for list item anchor point positioning based on two-way loading. The program product can exist in various forms. For example, it can be an independent application program, or a module embedded in other application programs, or a service running on the server side. Computer instructions refer to commands that can be recognized and executed by a computer processor, and are the basic units that make up the program product. In the present invention, computer instructions refer to instructions that can control a computer to execute a series of operations such as responding to user operations, requesting data, rendering pages, scrolling lists, and listening for scrolling operations. Computer instructions can be written in various programming languages, such as JavaScript, Java, C++. Implementing the steps of the foregoing method for list item anchor point positioning based on two-way loading when executed by a processor means that when a computer processor executes the computer instructions in the program product, it can complete all the steps of the method for list item anchor point positioning based on two-way loading according to a predetermined process and logic, including receiving a request containing a list item anchor point identifier, requesting data blocks within a predetermined range before and after the anchored list item, receiving and rendering the data, scrolling the list to the anchored position, listening for scrolling operations and continuously triggering two-way loading, etc.

[0089] By encapsulating the method for list item anchor point positioning based on two-way loading into a program product, it can be conveniently deployed and used on various mobile devices, thereby improving the generality and portability of this method. The program product can run independently to implement the complete anchor point positioning function, or can be integrated into other applications as a plugin to provide a more convenient browsing experience for users.

[0090] Such as Figure 4As shown in the figure, the present invention provides a list item anchor positioning device based on bidirectional loading, including: a processor; a memory, in which executable instructions of the processor are stored; wherein, the processor is configured to execute the steps of the aforementioned list item anchor positioning method based on bidirectional loading by executing the executable instructions. Among them, the processor refers to a hardware unit capable of executing computer instructions and is the core component of a computer system. In the present invention, the processor is responsible for executing the computer instructions stored in the memory, thereby implementing each step of the list item anchor positioning method based on bidirectional loading. The processor can be various types of processors, such as a central processing unit (CPU), a graphics processing unit (GPU), an embedded processor, etc. The memory refers to a hardware unit for storing computer instructions and data and is an important part of a computer system. In the present invention, the memory is used to store the computer instructions that the processor can execute and the data required during the execution process. The memory can be various types of memories, such as random access memory (RAM), read-only memory (ROM), flash memory (Flash Memory), etc. The executable instructions of the processor refer to computer instructions that can be recognized and executed by the processor and are the specific manifestation form of the program product. In the present invention, the executable instructions of the processor refer to instructions that can control the processor to execute a series of operations such as responding to user operations, requesting data, rendering pages, scrolling lists, and listening for scrolling operations, thereby implementing each step of the list item anchor positioning method based on bidirectional loading.

[0091] By configuring the processor to execute the executable instructions for implementing the steps of the list item anchor positioning method based on bidirectional loading, the device can independently complete the precise anchor positioning of list items at any position in the Html5 long list and support the user to seamlessly browse the complete list content on this basis. The device has the advantages of high efficiency, stability, ease of use, etc., and can be widely applied to various mobile devices, providing a more convenient browsing experience for users.

[0092] As Figure 5As shown, the present invention provides a computer-readable storage medium for storing a program, characterized in that when the program is executed by a processor, it implements the steps of the aforementioned method for positioning list item anchors based on bidirectional loading. Among them, a computer-readable storage medium refers to a medium that can store a computer program and can be read by a computer or a processor. Such a medium can be various forms of storage devices, including but not limited to: read-only memory (ROM), random access memory (RAM), erasable programmable read-only memory (EPROM), compact disc read-only memory (CD-ROM), magnetic tape, floppy disk, flash memory, and other types of storage devices. A program refers to a set of computer instructions that can be executed by a processor to complete a specific task. In the present invention, the program refers to a set of computer instructions that includes all the instructions required to implement the method for positioning list item anchors based on bidirectional loading. When the program is executed by a processor to implement the steps of the aforementioned method for positioning list item anchors based on bidirectional loading, it means that when the processor reads and executes the program from the computer-readable storage medium, the device can complete all the steps of the method for positioning list item anchors based on bidirectional loading according to a predetermined process and logic, including receiving a request containing a list item anchor identifier, requesting data blocks within a predetermined range before and after the anchored list item, receiving and rendering the data, scrolling the list to the anchored position, listening for scrolling operations and continuously triggering bidirectional loading, etc.

[0093] By storing the program for implementing the method for positioning list item anchors based on bidirectional loading in a computer-readable storage medium, it can be conveniently deployed and used on various computing devices, thereby improving the versatility and portability of the method. The storage medium can be easily copied, distributed, and installed, enabling users to easily obtain and use the method, thus improving their experience of browsing information in an Html5 long list.

[0094] The above content is a further detailed description of the present invention in combination with specific preferred embodiments, and it cannot be determined that the specific implementation of the present invention is only limited to these descriptions. For those of ordinary skill in the technical field to which the present invention pertains, without departing from the concept of the present invention, several simple deductions or substitutions can still be made, and all should be regarded as belonging to the protection scope of the present invention.

Claims

1. A list item anchor positioning method based on bidirectional loading, applied to Html5 long list loading on mobile devices, characterized in that: The following steps are involved: In response to a user operation, receiving a request including a list item anchor identifier; In response to the request, requesting the server to include the anchor list item corresponding to the list item anchor identifier and data blocks within a predetermined range before and after the anchor list item in the list sequence; Receive and render the list item data returned by the server, generate an Html5 list page, scroll the list to the predetermined position of the anchored list item in the user's visible area, and complete the anchor point positioning; Listen to the user's continuous scrolling operation, and continuously trigger the process of loading list data upward or downward according to the scrolling direction of the user's operation, so as to support the user to seamlessly browse the complete list content before and after the anchored list item based on the anchor point positioning, so as to realize the continuous loading of Html5 long list.

2. The list item anchor point positioning method based on bidirectional loading according to claim 1 is characterized in that: The step of scrolling the list to a predetermined position of the anchored list item in the user's visible area to complete the anchor point positioning includes at least one of the following: When the initial data is requested, at least one page of list data before and after the anchored list item is requested to be loaded in advance; During the user's scrolling process, the number of preloaded list data pages is dynamically adjusted according to the user's sliding speed and direction.

3. The list item anchor point positioning method based on bidirectional loading according to claim 2 is characterized in that: The step of scrolling the list to a predetermined position of the anchored list item in the user's visible area to complete the anchor point positioning includes at least one of the following: Scroll the anchored list item to the top of the Html5 list page; or Scroll the anchored list item to the middle of the Html5 list page; or The anchored list item is scrolled to a predetermined position in the Html5 list page that is offset from an edge of a user's viewing area.

4. The list item anchor point positioning method based on bidirectional loading according to claim 1 is characterized in that: The process of continuously triggering upward loading or downward loading of list data includes: When the user scrolls up to the top of the Html5 list page and exceeds the preset distance threshold, the list data is loaded upward; When the user scrolls down to the bottom of the Html5 list page and exceeds the preset distance threshold, the list data is loaded downward.

5. The list item anchor point positioning method based on bidirectional loading according to claim 1, characterized in that: The cache step is also included, and the cache step is: The loaded list item data is cached in the mobile device, and when a request is made to load list data of the same range again, it is read from the cache first.

6. The list item anchor point positioning method based on bidirectional loading according to claim 5, characterized in that: The caching step comprises: Generate cache key value based on page number or index range of list data; Using client local storage technology to store list item data corresponding to the cache key value; Set the validity period of cached data. After the validity period expires, the cache will automatically become invalid.

7. A list item anchor point positioning system based on bidirectional loading, applied to Html5 long list loading of mobile devices, used to implement the list item anchor point positioning method based on bidirectional loading according to any one of claims 1 to 6, characterized in that: The system comprises: Request receiving module: used for receiving a request including a list item anchor mark in response to a user operation; Data request module: used for, in response to the request, requesting from the server the anchor list item corresponding to the anchor identifier of the list item and the data blocks within a predetermined range before and after the anchor item in the list sequence, and adopting a bidirectional loading strategy, allowing requests to load list data upward and downward according to the browsing operation of the user during and after the anchor location; Rendering and positioning module: used to receive and render the list item data returned by the server, generate an Html5 list page, and scroll the list to the predetermined position of the anchored list item in the user's visible area to complete the anchor point positioning; Bidirectional loading module: used to monitor the user's continuous scrolling operation, and continuously trigger the process of loading list data upward or downward according to the scrolling direction of the user's operation, so as to support users to seamlessly browse the complete list content before and after the anchored list item, so as to realize the continuous loading of Html5 long list.

8. A list item anchor point positioning program product based on bidirectional loading, characterized in that: The program product comprises computer instructions, which implement the steps of the method according to any one of claims 1 to 6 when executed by a processor.

9. A list item anchor point positioning device based on bidirectional loading, characterized in that: include: processor; a memory storing executable instructions of the processor; The processor is configured to execute the steps of the list item anchor positioning method based on bidirectional loading according to any one of claims 1 to 6 by executing the executable instructions.

10. A computer-readable storage medium for storing a program, characterized in that: When the program is executed by a processor, the steps of the list item anchor point positioning method based on bidirectional loading according to any one of claims 1 to 6 are implemented.

Images