Interface interaction method, container component, computer readable storage medium and device

Abstract

Embodiments of the present application provide an interface interaction method, a container component, a computer readable storage medium and a device. Embodiments of the present application provide a container component. The container component includes a first container and a second container; the first container is movable in response to an interface operation, and the second container moves along with the first container; the first container carries display content, which includes a first page carried by a first column carrying area of the second container; the second container includes multiple column carrying areas, and one column carrying area carries one page; and carrying areas other than the first column carrying area in the multiple column carrying areas are hidden. The second container can switch the carrying areas in response to an interface operation to switch the pages. With the container component having the above architecture, the scheme provided by embodiments of the present application can achieve real-time listening-free and real-time calculation-free display content sliding process based on the container component having the architecture, and has better operation experience, smoother page operation, and low probability of freezing and frame dropping.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to an interface interaction method, container component, computer-readable storage medium and device. Background Technology

[0002] The user experience of client-side applications is becoming increasingly important, as a good user experience can bring numerous benefits. Currently, most shopping guide pages (such as the homepage) of e-commerce client applications are implemented using H5 (Hypertext Markup Language, the fifth revised version of Hypertext Markup Language). These pages are prone to lag and frame drops during user interaction, resulting in an unsmooth user experience. Summary of the Invention

[0003] To address the problems existing in the prior art, this application provides a user interface interaction method, a container component, a computer-readable storage medium, and a device. Specifically,

[0004] In one embodiment of this application, a user interface interaction method is provided. The method includes:

[0005] The first container displays the content; wherein the content includes a first page carried by a first column of a second container; the second container includes multiple columns of columns, each column carrying one page; the columns other than the first column are hidden.

[0006] In response to a swipe command, the first container moves, and the second container follows, causing the displayed content to slide out.

[0007] In response to a switching command, the sliding information of the displayed content is obtained, and the historical browsing record of the first page is determined based on the sliding information, so as to locate the browsing position of the first page before it was switched away when switching back to the first page;

[0008] In response to the switching command, the first column of the container is hidden, and the second page carried by the second column of the container is displayed.

[0009] In another embodiment of this application, a container component is also provided. The container component includes a first container and a second container; wherein,

[0010] The first container is used to carry the displayed content, which includes the first page carried by the first column of the second container;

[0011] The first container is also used to move in response to a swipe command, and the second container moves with the first container, so that the displayed content is swiped and displayed.

[0012] The second container includes multiple columns of carrier areas, with each column carrying one page; the carrier areas other than the first column are hidden.

[0013] The second container is also used to switch bearer areas in response to switching instructions.

[0014] In another embodiment of this application, a user interface interaction device is also provided. The device includes:

[0015] The second container consists of multiple columns of hosting areas, with each column hosting one page.

[0016] The first container is used to carry the displayed content; the displayed content includes a first page carried by the first column of the second container, and the multiple columns of the container except for the first column are hidden;

[0017] An interactive component is configured to respond to a swipe command, control the first container to move, and the second container to follow, so that the displayed content is swiped and displayed; it is also configured to respond to a switch command, acquire the swipe information of the displayed content, and determine the historical browsing record of the first page based on the swipe information, so as to locate the browsing position of the first page before it was switched away when switching back to the first page; it is also configured to respond to the switch command, control the second container to switch, so as to hide the first column carrying area and display the second page carried by the second column carrying area of ​​the second container.

[0018] This application embodiment also provides a system including a memory, a processor, and a display; wherein the memory is used to store computer programs;

[0019] The processor is coupled to the memory and the display, and is used to execute the computer program stored in the memory to implement the steps in the interface interaction method provided in the above embodiments.

[0020] This application also provides a computer-readable storage medium storing computer instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps in the above-described interface interaction method.

[0021] Another embodiment of this application provides a computer program product, which includes a computer program or instructions that, when executed by a processor, cause the processor to perform the steps in the above-described interface interaction method.

[0022] This application provides a container component as one technical solution. The container component includes a first container and a second container; the first container is responsive to interface operations and the second container moves accordingly; the first container carries a first page displayed in a first column of the second container; the second container includes multiple columns, each carrying one page; the columns other than the first column are hidden. The second container can switch its carrying areas to switch pages in response to interface operations.

[0023] With the container component of the aforementioned architecture as a foundation, the solution provided in this application embodiment can achieve a good user experience without real-time monitoring or calculation during the content scrolling process. Specifically, in the solution provided in this application embodiment, because the second container moves with the first container, when a switching command is issued, the scrolling information of the content displayed in the first container is obtained. Based on this scrolling information, the historical browsing record of the first page to be switched to can be determined, so as to locate the browsing position of the first page when it is switched back later. It can be seen that the technical solution provided in this application embodiment can achieve the goal of not needing real-time tracking, monitoring, and calculation during the movement of the first container and the subsequent movement of the second container. This avoids the thread occupation caused by real-time monitoring and calculation, which helps to improve the smoothness of page operation. After actual testing, the technical solution provided in this application embodiment is further verified to be smoother in page operation and has a low probability of stuttering and frame drops.

[0024] Furthermore, the embodiments of this application can be implemented based on React, which provides high compatibility in the web browser environment, can be deployed in any H5 scenario, and reduces the cost of modification and release. Attached Figure Description

[0025] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0026] Figure 1 This is a schematic diagram of the structure of a container assembly provided in one embodiment of this application;

[0027] Figure 2 A schematic diagram showing the second container following the first container in a container assembly provided in an embodiment of this application, causing multiple labels 4 to stick to the top;

[0028] Figure 3 A flowchart illustrating an embodiment of the interface interaction method provided in this application;

[0029] Figure 4a This is a schematic diagram illustrating the sliding distance of multiple labels 4 according to an embodiment of this application;

[0030] Figure 4b This is a schematic diagram illustrating the sliding distance of the first page after the second container moves following the first container, according to an embodiment of this application.

[0031] Figure 5 A structural block diagram of an interface interaction device provided in an embodiment of this application;

[0032] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0033] Figure 7 The diagram illustrates an interactive interface implemented using the technical solution provided in the embodiments of this application, showing a schematic of page a, carried by the first column of the second container, being displayed in the visual interface after the user swipes up.

[0034] Figure 8 This diagram illustrates how, after a user swipes right, the first column of the second container is hidden, and page b, carried by the second column, is displayed within the visible interface. Detailed Implementation

[0035] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. In some processes described in the specification, claims, and accompanying drawings of this application, multiple operations appearing in a specific order are included. These operations may be executed in any order or in parallel. Operation numbers such as 101, 102, etc., are merely used to distinguish different operations and do not represent any execution order. Furthermore, these processes may include more or fewer operations, and these operations may be executed sequentially or in parallel. It should be noted that the descriptions such as "first" and "second" in this document are used to distinguish different information, devices, modules, etc., and do not represent a sequential order, nor do they limit "first" and "second" to different types. In addition, the embodiments described below are only some embodiments of this application, not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.

[0036] Before introducing the various embodiments of this application, a brief introduction will be given to the technical terms that will appear in this document.

[0037] H5: HTML5 is a language for describing web content. H5 is suitable for scenarios including but not limited to: brand communication, promotional activities, event marketing, product display, etc.

[0038] Tab: A common UI (user interface) element used to display sections on web pages.

[0039] React: A development toolkit used for web development. React is primarily used for building UIs. It allows passing various types of parameters, such as declarations to help render the UI; static HTML DOM (Document Object Model) elements; dynamic variables; and even interactive application components.

[0040] DOM: Document Object Model, a standard for processing Extensible Markup Language (HTML or XML). A webpage is a document, represented by the DOM term "document". All tags on a page are elements, represented by the DOM term "element". All content on a webpage is a node (tags, attributes, text, comments, etc.), represented by the DOM term "node". The DOM treats documents, elements, and nodes as objects.

[0041] CSS: Cascading Style Sheets, is a tool for adding layout effects to websites. CSS3 is a technological upgrade of CSS.

[0042] Figure 1 A schematic diagram of the structure of a container assembly according to an embodiment of this application is shown. Figure 1 As shown, the container component may include a first container 1 and a second container 2. The first container 1 is used to hold displayed content. The displayed content includes a first page 31 held by a first column of the second container 2. The first container 1 is also used to move in response to a swipe command, and the second container 2 moves with the first container 1, causing the displayed content to slide out. The second container 2 includes multiple columns of display areas, each column holding one page. The display areas other than the first column are hidden. Figure 1 In the illustrated embodiment, the first carrier area 21 of the second container 2 is in a displayed state, while the second carrier area 22 and the third carrier area 23 are both in a hidden state. The second container 2 can also be used to switch carrier areas in response to a switching command.

[0043] It's important to note here that "sliding" in the above text can also be called "scrolling" or other similar terms. "Sliding" or "scrolling" are terms used to describe the user's interaction. In essence, "sliding display" can be simply understood as a long list page scrolling along one direction (e.g., ...). Figure 1 The process of moving (in the Y direction) dynamically hides part of the content from one side of the visible interface and continuously presents new content from the other side.

[0044] The swipe or switch commands mentioned above can be: commands generated by user actions on the interactive interface, or commands generated based on user voice or motion images, etc.

[0045] Taking the user's interaction with the interface triggering swipe and switch commands as an example, the first container 1 responds to the first direction (e.g., Figure 1 A sliding operation along the Y-axis (in the first direction) causes the displayed content to slide and be displayed. If the user client is a touchscreen, the user can trigger a sliding operation along the positive Y-axis on the touchscreen, and the displayed content carried by the first container 1 will slide along the positive Y-axis (i.e., the content displayed along the positive Y-axis). Figure 1 The content displayed in the first container 1 moves in the upward direction (as indicated). When the user triggers a swipe on the touchscreen along the negative Y-axis, the content moves along the negative Y-axis (i.e., the content displayed in the first container 1 moves along the negative Y-axis). Figure 1 Move in the downward direction (as indicated). Alternatively, the user can control the movement via mouse or touchscreen. Figure 1 The right edge of the display slider (or scroll bar) is along the negative Y-axis direction (i.e., Figure 1 Pull the slider (in the downward direction) and the content displayed in the first container 1 will move along the positive Y-axis direction (i.e., Figure 1 The slider moves along the positive Y-axis (i.e., the direction shown in the image). The user moves the slider using a mouse or touchscreen, along the positive Y-axis direction (i.e., the direction indicated by the slider). Figure 1 Pull the slider (upward direction) and the content displayed in the first container 1 will move along the negative Y-axis direction (i.e., Figure 1 The first container 1 moves in the downward direction (as shown in the image). The second container 2 follows, causing the first page to slide and display along the first direction. The first container 1 responds to the second direction (e.g., downward direction). Figure 1 A sliding operation in the X direction hides the first column carrying area and displays the second page carried by the second column carrying area of ​​the second container.

[0046] Figure 1In one specific embodiment, the first container 1 is the only outer sliding container. The second container 2 is the inner container of the first container 1, and the second container 2 moves along with the outer first container. In practice, the outer first container 1 can use the native sliding (or scrolling) functionality of HTML5, achieving sliding (or scrolling) without listening or computation. A column of the second container 2 can hold a feed stream (information stream) list. That is, multiple feed stream lists are wrapped in a second container with a large width. Figure 1 As shown, multiple feed streams are arranged along the second direction. The feed streams can be switched horizontally (as shown in the X direction in the figure) to display one of the feed streams in the visual interface.

[0047] The container component provided in this application embodiment can be applied to the homepage or onboarding page of various applications. For example, on the homepage of an e-commerce application, the content displayed in the first container may include various types of content, such as tabs, advertising images or videos, recommendation information, search bar, etc. Figure 1 In one specific implementation shown, the displayed content further includes multiple labels 4. Each label is associated with a page displayed in a column of display areas; switching labels switches the display areas to switch pages. For example, the first label 41 is associated with the first page 31 displayed in the first column of display areas 21. The second label 42 is associated with the second page 32 displayed in the second display area 22. The third label 43 is associated with the third page 33 displayed in the third display area 23.

[0048] In practical implementation, the first container 1 moves, and the multiple labels 4 move upwards along the Y direction to the upper boundary of the first container 1 (or the visual interface). After reaching this point, the multiple labels can remain at the top; that is, in this embodiment, the multiple labels can have an automatic sticky-to-the-top function. In implementation, the `position:sticky` property of CSS (Cascading Style Sheets) can be used to achieve the automatic sticky-to-the-top function of the multiple labels. For example... Figure 2 As shown in the diagram, after multiple labels 4 are attached to the top, when the first container moves in response to the sliding command, the multiple labels 4 carried by the first container 1 remain in place, while the second container 2 moves accordingly, causing the first page of the first carrying area to slide out. It should also be noted that after multiple labels 4 are attached to the top, from the interface perspective, the sliding command applies to the first page. Therefore, in practical applications, the position of the slider in the diagram can be restored to the top of the first container (or the visible interface); or it can be moved to the top of the second container.

[0049] To improve compatibility and reduce modification and release costs, the first and second containers in this embodiment can be implemented based on the React Native framework (an open-source cross-platform mobile application development framework). React Native combines the advantages of web applications and native applications, allowing the development of iOS and Android native applications using JavaScript (a multi-paradigm, interpreted programming language). In JavaScript, React abstracts the operating system's native UI (user interface) components, replacing DOM elements for rendering, etc.

[0050] The UI / UX module (or device) containing the container component of this embodiment implements a native web application using React Native. Therefore, when the UI / UX module needs to be updated, the local engineer directly uploads the updated code to the server. Users can then log in to the server directly via the client to use the updated application. This update method enables dynamic system updates, which is fundamentally different from previous update methods. In the past, if an urgent problem occurred on the client side, a new version had to be released to resolve it, and the process of releasing a new version was cumbersome.

[0051] Front-end native applications written in server-side languages ​​using React Native only require local code modifications and uploading to the server when updates are needed. Clients can then access the server for updates, avoiding frequent version updates. Therefore, implementing the embodiments of this application based on React Native offers high compatibility in web browser environments, can be deployed in any H5 scenario, and reduces modification and deployment costs.

[0052] Based on the container components described above, another embodiment of this application provides a user interface interaction method. Figure 3 A flowchart illustrating this interface interaction method is shown. For example... Figure 3 As shown, the method includes:

[0053] 101. Display the content carried by the first container.

[0054] The displayed content includes a first page displayed in the first column of the second container; the second container includes multiple columns of display areas, with each column displaying one page; the display areas other than the first column of display areas are hidden.

[0055] 102. In response to a sliding command, the first container moves, and the second container follows, causing the displayed content to slide.

[0056] 103. In response to the switching command, obtain the sliding information of the displayed content, and determine the historical browsing record of the first page based on the sliding information, so as to locate the browsing position of the first page before it was switched away when switching back to the first page.

[0057] 104. In response to the switching command, the first column carrying area is hidden, and the second page carried by the second column carrying area of ​​the second container is displayed.

[0058] With the container component of the aforementioned architecture as a foundation, the solution provided in this application embodiment can achieve a good user experience without real-time monitoring or calculation during the content scrolling process. Specifically, in the solution provided in this application embodiment, because the second container moves with the first container, when a switching command is issued, the scrolling information of the content displayed in the first container is obtained. Based on this scrolling information, the historical browsing record of the first page to be switched to can be determined, so as to locate the browsing position of the first page when it is switched back later. It can be seen that the technical solution provided in this application embodiment can achieve the goal of not needing real-time tracking, monitoring, and calculation during the movement of the first container and the subsequent movement of the second container. This avoids the thread occupation caused by real-time monitoring and calculation, which helps to improve the smoothness of page operation. After actual testing, the technical solution provided in this application embodiment is further verified to be smoother in page operation and has a low probability of stuttering and frame drops.

[0059] In one feasible implementation, the step 103 above, "determining the historical browsing history of the first page based on the sliding information," may include:

[0060] 1031. Based on the sliding information, determine the first sliding distance of the second container on the visual interface;

[0061] 1032. Based on the sliding information, determine the second sliding distance of the first page;

[0062] 1033. Determine the historical browsing records of the first page based on the first sliding distance and the second sliding distance.

[0063] like Figure 1 In the example shown, the displayed content also includes multiple tags; each tag is associated with a page displayed in a column of display areas. Correspondingly, the method provided in this application embodiment may further include the following steps:

[0064] 105. In response to the sliding command, the plurality of tags move and remain stationary at the set position when they reach the set position on the visual interface;

[0065] 106. The sliding distance of the plurality of labels is used as the first sliding distance of the second container on the visual interface and recorded in the sliding information.

[0066] Of course, if multiple labels are already attached to the top and do not move, then the first sliding distance of the second container on the visual interface is zero. Alternatively, in other embodiments, it may not be multiple labels, but other types of controls or icons, etc., which are not limited in this embodiment.

[0067] In this embodiment, since the second container moves with the outer first container, in order to restore the browsing position before the page was switched away when switching back occurs (i.e., the carrying area is switched), it is necessary to obtain the sliding information of the displayed content when the switch occurs.

[0068] See Figure 4a and 4b The example shown, Figure 4a The image shows the situation after the first container moves multiple labels 4 to the top. Figure 4a The content displayed in gray above the first container is invisible. The sliding distance d1 of the multiple labels 4 is actually the movement distance of the second container within the visible interface (or the first container). After the multiple labels 4 are attached to the top, when the first container continues to move in response to the sliding command, the positions of the multiple labels 4 remain unchanged, and the second container 2 moves accordingly, causing the first page 31 of the first carrier area 21 to slide and be displayed. Because the multiple carrier areas, such as the first carrier area 21, the second carrier area 22, and the third carrier area 23, are a subset of the same container, when the second container 2 moves accordingly, the second page 32 carried by the second carrier area 22 and the third page 33 carried by the third carrier area 23, which are in a hidden state, also slide synchronously; the content of the sliding area of ​​the first page 31 carried by the first carrier area 21 within the visible interface (i.e., ...) Figure 4b The content at the segment corresponding to distance d2 shown in the figure is not visible.

[0069] On the visual interface, the sliding distance of the first page 31 is D. Where D = d1 + d2, meaning the first page 31 first moves up by d1, then slides by d2. Assuming we want to switch to the second page 32 hosted in the second carrying area 22, the sliding information obtained may include, but is not limited to: d1 (the first sliding distance of the second container on the visual interface) and the second sliding distance D of the first page.

[0070] It should be noted that: for ease of understanding, this article has broken down and analyzed the value of D. In fact, the first container is the only slidable container, and the sliding is not monitored and calculated in real time in this solution. Therefore, when obtaining sliding information, the sliding distance D of the first page can only be obtained from the display of the content of the first page just before the switch, and the moving distance d1 of multiple tags 4 can also be obtained from the display of multiple tags 4.

[0071] In practice, the following calculation formula can be used to determine the browsing history of the first page:

[0072] The browsing history on the first page is d2 = D - d1

[0073] The browsing history of the first page is stored to locate the browsing position before the first page was switched away when switching back to the first page. If the first page is switched away and then switched back, the top offset padding-top value of the first column's content area corresponding to the first page can be set based on the d2 value. More specifically, setting the top offset padding-top value of the first column's content area corresponding to the first page to d2 will accurately display the browsing position before the first page was switched away after switching back to the first page.

[0074] The obtained sliding information of the displayed content includes not only the sliding distance of the first page and the sliding distance of the second container on the visual interface, but also sliding timestamps, sliding coordinates, etc. The sliding distance can be obtained by recording the initial coordinates (x1, y1) and the coordinates (x2, y2) of a marked position, and then calculating the sliding distance based on the initial coordinates (x1, y1) and the coordinates (x2, y2). This marked position can be any position within the content carried by the container; this embodiment does not limit this.

[0075] Step 104 above, "displaying the second page carried by the second column of the second container", may include:

[0076] 1041. If the second page has a browsing history record, then locate the browsing position of the second page according to the browsing history record of the second page;

[0077] 1042. Based on the browsing position of the second page, display the second page carried by the second column of the second container.

[0078] If there is no browsing history on the second page, the top of the second page will be used as the browsing position.

[0079] In one feasible technical solution, the above-mentioned 1042 "displaying the second page carried by the second column carrier area of ​​the second container based on the browsing position of the second page" may include:

[0080] S1. Based on the browsing position of the second page, set the top offset padding-top value of the second page relative to the second column carrying area of ​​the second container;

[0081] S2. Display the second page within the second column carrying area according to the top offset padding-top value.

[0082] Furthermore, before displaying the second page carried by the second column of the second container, the method provided in this application embodiment may further include the following steps:

[0083] Display a transition animation from the first page to the second page.

[0084] In practice, the native animation method of `translate3d` (a new CSS3 property) can be used to implement the switching animation of pages (such as feeds) carried by different areas of the second container, avoiding the lag caused by manipulating DOM (Document Object Model) elements using JavaScript. If you want to animate the movement of a DOM element using JavaScript, you need to set the element's position to `absolute` (a parameter in JavaScript) and then change its `top`, `left`, `right`, and `bottom` properties using JavaScript. Using CSS3's `translate3d` eliminates the need to set the element's position, reducing the calculation process of changing the properties of each element and thus solving the lag problem.

[0085] The solution provided in this application embodiment can also pre-define the onTouch event (a method defined in an interface) to avoid conflicts between left-right swiping to switch pages and up-down swiping operations. That is, the method provided in this application embodiment may further include the following steps:

[0086] 107. When a swipe up or down command event is detected, the first container intercepts and consumes the swipe up or down command event to execute the step of moving the first container in response to the swipe command;

[0087] 108. When a left or right swipe command event is detected, the first container passes the left or right swipe command event to the second container, and the second container consumes the left or right swipe command event to execute the step of responding to the switching command, hiding the first column carrier area, and displaying the second page carried by the second column carrier area of ​​the second container.

[0088] Because the outer and inner layers slide in different directions, the event is determined based on the gesture's direction. When the event targets content within the inner container, it's passed layer by layer from the outer to the inner layer for processing. For example, if the outer first container is for vertical swiping and the inner second container is for horizontal swiping: When the gesture is determined to be vertical, the outer first container needs to consume the vertical swiping event. Therefore, the outer first container intercepts the vertical swiping event, returning true in its `onInterceptTouchEvent` method if it detects `ACTION_MOVE`. However, if the gesture is determined to be horizontal, the inner second container needs to consume the event, and the outer first container doesn't need to intercept it; the horizontal swiping event is passed to the inner second container for processing. This resolves the swiping conflict by determining the swiping direction to determine the event handler.

[0089] Determining the swipe direction of a gesture can be achieved by comparing the displacement values ​​in the horizontal and vertical directions. A MotionEvent swipe event contains the event coordinates. By recording the start and end coordinates of a swipe event, the swipe direction is determined by comparing the horizontal displacement |dx| and the vertical displacement |dy|. For example, if |dy| > |dx|, the movement is considered up / down; otherwise, it's considered left / right. Alternatively, the angle α, slope, and speed can also be used as criteria for judgment.

[0090] Furthermore, after the switch is completed, the embodiments of this application may also include the following steps:

[0091] 109. After displaying the second page carried by the second column of the second container, reset the scrollTop value of the first container to its initial value.

[0092] After the switch is complete, the scrollTop value of the outer first container is reset to its initial value so as not to affect the movement of the second container. This embodiment does not limit the specific value of this initial value.

[0093] Furthermore, the method provided in this application embodiment may also include the following steps:

[0094] 110. Set the height of the invisible area corresponding to the page carried by at least one of the multiple carrying areas of the second container to a preset value.

[0095] For example, the height of the invisible areas of all pages in the second container can be set to zero to reclaim memory and improve scrolling performance.

[0096] As can be seen from the above, the solution in this application requires two things to be done when a switch occurs:

[0097] ① Obtain the scrolling information of the displayed content to determine the browsing history of the page to be scrolled to.

[0098] ② When switching to display the second page, because the areas containing multiple pages are in the same container, and the second container moves with the first container, it is necessary to locate the browsing position of the second page. If the second page has browsing history, the top offset padding-top value of the second column's area is set directly based on the browsing history; if there is no browsing history, the top offset padding-top value of the second column's area is set based on the top position of the second page.

[0099] After the switch is complete, reset the scroll top of the first container.

[0100] The technical solutions provided in this application can be implemented in client application (APP) pages or browser web pages. H5 pages are content displayed to the user in response to the APP's actions. For example, an APP can be an application installed on a client (such as a mobile phone, tablet, smart wearable device, or desktop computer), such as a shopping application, social application, news application, etc. The APP's pages are used to display category tags (such as product category tags, news category tags), image information (product images, news images, etc.), text information (product names, news titles, etc.), videos, etc., to the user.

[0101] Loading an app page involves steps such as network requests and page rendering. A network request is when the app's client sends relevant data to the server over the network. In response to the network request, the server sends a file containing the relevant data (such as React Native component files) to the app client.

[0102] The app parses the received file and renders it to obtain an H5 page. A page can include multiple elements, such as paragraphs, images, buttons, tables, and forms, which can be nested. Each page has a corresponding DOM. The DOM defines the objects and properties of all elements on the page, as well as the methods for accessing them. The DOM represents the page in a tree structure, with all element content represented as nodes in the DOM tree (i.e., DOM nodes).

[0103] The app parses the file to generate a JavaScript file, and then uses JavaScript to build the corresponding DOM tree; based on the DOM tree, the page is rendered on the screen, thus loading the H5 page.

[0104] The solution in this application embodiment can use React technology. React's core concept is the Virtual DOM (Document Object Model). The DOM is a cross-platform, programming language-independent API that treats HTML, XHTML, or XML documents as a tree structure, with each node considered an object. These objects can be manipulated by programming languages, thereby changing the document's structure and mapping it to the document's display.

[0105] The Virtual DOM algorithm essentially uses JavaScript objects to simulate the DOM tree. Its algorithm is roughly as follows:

[0106] Step 1: Use JavaScript object mapping to form the structure of the DOM tree, and then use this tree to build a real DOM tree;

[0107] Step 2: When the state changes, reconstruct a new object tree, then compare the new tree with the old tree (Diff algorithm), and record the differences between the two trees;

[0108] Step 3: Apply the differences recorded in Step 2 to the actual DOM tree built in Step 1, and the page will be updated.

[0109] The core of the virtual DOM lies in the Diff algorithm, which automatically calculates the areas that should be adjusted and then only modifies those areas.

[0110] Figure 5 This illustration shows a user interface interaction device according to another embodiment of the present application. The device includes: a first container 1, a second container 2, and an interaction component 5.

[0111] The second container 2 includes multiple columns of carrier areas 20, with each column of carrier area 20 carrying one page.

[0112] The first container 1 is used to carry the displayed content; the displayed content includes a first page carried by the first column of the second container 2, and the multiple columns of the carrying area other than the first column of the carrying area are hidden;

[0113] Interactive component 5 is used to respond to a sliding command to control the first container 1 to move, and the second container 2 to slide and display the first page accordingly; it is also used to respond to a switching command to obtain the sliding information of the displayed content; determine the historical browsing record of the first page based on the sliding information, so as to locate the browsing position of the first page before it was switched away based on the historical browsing record of the first page when switching back to the first page; it is also used to respond to the switching command to control the second container to switch, so as to hide the first column carrying area and display the second page carried by the second column carrying area of ​​the second container.

[0114] Furthermore, when determining the historical browsing history of the first page based on the sliding information, the interactive component 5 is specifically used for:

[0115] Based on the sliding information, the first sliding distance of the second container on the visual interface is determined;

[0116] Based on the sliding information, determine the second sliding distance of the first page;

[0117] The browsing history of the first page is determined based on the first swipe distance and the second swipe distance.

[0118] Furthermore, the displayed content also includes multiple tags; each tag is associated with a page displayed in a column of display areas.

[0119] Accordingly, the interaction component 5 is also used for:

[0120] In response to the sliding command, the first container is controlled to move, causing the plurality of labels to move and remain stationary at the set position when they reach the set position on the visual interface;

[0121] The sliding distance of the plurality of labels is used as the first sliding distance of the second container on the visual interface and recorded in the sliding information.

[0122] Furthermore, when controlling the second container 2 to display the second page carried by the second carrying area, the interactive component 5 is specifically used for:

[0123] If the second page has a browsing history record, then locate the browsing position of the second page based on the browsing history record of the second page;

[0124] Based on the browsing position of the second page, the second page carried by the second column of the second container is displayed.

[0125] Furthermore, when the interactive component 5 displays the second page carried by the second column of the second container based on the browsing position of the second page, it is specifically used for:

[0126] Based on the browsing position of the second page, set the top offset padding-top value of the second page relative to the second column carrying area of ​​the second container;

[0127] The second page is displayed within the second column's carrying area according to the top offset padding-top value.

[0128] Furthermore, before the interactive component 5 controls the second container to display the second page carried by the second column carrier area, the interactive component 5 is also used to:

[0129] Display a transition animation from the first page to the second page.

[0130] Furthermore, the interaction component 5 is also used to detect swipe events. When the interaction component 5 detects a vertical swipe command event, the first container 1 intercepts and consumes the vertical swipe command event to execute the step of moving the first container in response to the swipe command. When the interaction component 5 detects a horizontal swipe command event, the first container 1 transmits the horizontal swipe command event to the second container 2. The second container 2 consumes the horizontal swipe command event to execute the step of hiding the first column area and displaying the second page carried by the second column area of ​​the second container in response to the switching command.

[0131] Furthermore, after controlling the second container 2 to display the second page carried by the second column carrying area, the interactive component 5 is also used to reset the scrollTop value of the first container 1 to the initial value.

[0132] Furthermore, the interactive component 5 is also used to set the height of the invisible area corresponding to the page carried by at least one of the multiple columns of the second container 2 to a preset value.

[0133] It should be noted that the interface interaction device provided in the above embodiments can realize the technical solutions described in the above method embodiments. The specific implementation principles of the above modules or units can be found in the corresponding contents of the above method embodiments, and will not be repeated here.

[0134] This application also provides an embodiment of an electronic device employing the solutions corresponding to the above embodiments. A schematic diagram of the principle structure of this electronic device is shown below. Figure 6As shown. The electronic device includes: a memory 61, a processor 62, and a display 64. The memory 61 stores computer programs. The processor 62, coupled to the memory 61, executes the computer program stored in the memory (the computer program may include one or more computer instructions) to implement the steps in the interface interaction method provided in this application embodiment.

[0135] In the above, memory 61 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0136] Figure 6 The diagram only schematically illustrates some of the components that an electronic device may contain, and does not mean that the electronic device only includes... Figure 6 The components shown include, for example, audio component 66, power supply component 65, communication component 63, etc.

[0137] Another embodiment of this application provides a computer program product (not shown in the accompanying drawings). This computer program product includes a computer program or instructions that, when executed by a processor, enable the processor to perform the steps described in the above-described method embodiments.

[0138] Accordingly, embodiments of this application also provide a computer-readable storage medium storing a computer program, which, when executed by a computer, can implement the method steps or functions provided in the above embodiments.

[0139] The technical solutions provided in the embodiments of this application can be applied to various types of applications (APPs), such as social applications, e-commerce applications, game applications, news applications, etc. In addition, the technical solutions provided in the embodiments of this application can also be used in mini-program applications. A mini-program application is an application that can be used without downloading and installation. For example, taking an e-commerce application as an example... Figure 7 As shown. The homepage of this e-commerce application can be implemented using the technical solutions provided in the various embodiments of this application. Taking the homepage including two tabs as an example, tab A is associated with page a carried in the first column carrier area; tab B is associated with page b carried in the second column carrier area. Specifically, an interface interaction method includes:

[0140] S1. In response to the application launch command, display the content carried by the first container.

[0141] The application launch command is triggered when a user touches the application icon or when the user speaks to launch the application. The displayed content includes, but is not limited to: a search bar, advertising images, page navigation controls, a tab bar (including the two tabs A and B mentioned above), and page a displayed in the first column of the second container. The second container includes two columns; the second column is hidden. Alternatively, when the application's homepage is opened, the content displayed may not include the content displayed in the second container. After the user initiates a swipe, the second container moves a short distance with the first container, and then page a displayed in the first column of the second container becomes visible.

[0142] S2. In response to the sliding command, the first container moves and the second container follows, causing the displayed content to slide.

[0143] like Figure 7 As shown, when the tab bar (i.e., tab A and tab B) in the displayed content is moved to the top of the visible interface, its position remains at the top (i.e., it automatically sticks to the top).

[0144] S3. In response to the first switching command, obtain the sliding information of the displayed content, and determine the first sliding distance of the second container on the visual interface and the second sliding distance of page a based on the sliding information; determine and store the historical browsing records of page a according to the first sliding distance and the second sliding distance.

[0145] like Figure 8 In the process, the user triggers the left swipe operation on the visual interface, which generates the first switching command.

[0146] S4. In response to the first switching instruction, hide the first column carrying area, locate the browsing position of page b carried by the second column carrying area of ​​the second container, set the top offset padding-top value of page b relative to the second column carrying area of ​​the second container according to the browsing position of page b, and display page b in the second column carrying area according to the top offset padding-top value.

[0147] It should be noted that because the steps in this embodiment are written from the moment the application starts, page b has no browsing history when switching to page b. At this time, the browsing position of page b is the header of page b.

[0148] S5. After displaying page b carried by the second column of the second container, reset the scrollTop value of the first container to its initial value.

[0149] S6. In response to the second switching instruction, determine the browsing history of page b.

[0150] The process of determining the browsing history of page b is the same as that of page a, as described above, and will not be repeated here.

[0151] S7. In response to the second switching command, hide the second carrying area, obtain the browsing history of page a, and locate the browsing position of page a based on the browsing history of page a; based on the browsing position of page a, display page a carried in the first column carrying area.

[0152] The second switching command can be generated after the user triggers a right swipe operation on the visual interface.

[0153] S8. Set the height of the invisible area corresponding to the page carried by at least one of the two columns of the second container to a preset value.

[0154] It should be noted that the above step S8 can be executed periodically or irregularly, or when a memory reclamation instruction is received, etc. This application embodiment does not specifically limit this.

[0155] As can be seen, in the above scheme, only the first container is movable, while the second container moves with the user interface. The scrolling process of the displayed content is not monitored or calculated in real time. The current browsing position of the switched page is only determined when switching between multiple pages carried by the second container, and this is recorded as a history of browsing. This facilitates restoring the display to that browsing position when switching back later. This avoids the thread occupation caused by real-time monitoring and calculation, which helps improve the smoothness of page operation. Actual testing further verifies the technical solution provided by this application embodiment, showing smoother page operation and a lower probability of stuttering or frame drops.

[0156] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

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

[0158] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A user interface interaction method, characterized in that, include: The first container displays the content to be displayed; wherein the content to be displayed includes multiple controls and a first page carried by a first column of a second container; the second container includes multiple columns of carrying areas, each column carrying a page, and a control associated with a page carried by a column of carrying areas; the carrying areas other than the first column of carrying areas are hidden. In response to a sliding command, the first container moves, and the second container moves accordingly, causing the displayed content to slide; and in response to the sliding command, the plurality of controls move, and when they move to a set position on the visual interface, they remain stationary at the set position, and the sliding distance of the plurality of controls is taken as the first sliding distance of the second container on the visual interface; In response to the switching command, the difference between the second sliding distance and the first sliding distance of the first page is determined as the browsing history of the first page, so as to locate the browsing position of the first page before it was switched away when switching back to the first page; In response to the switching command, the first column of the container is hidden, and the second page carried by the second column of the container is displayed.

2. The method according to claim 1, characterized in that, The multiple controls include multiple labels.

3. The method according to claim 1 or 2, characterized in that, The second page, which displays the second column of the second container, includes: If the second page has a browsing history record, then locate the browsing position of the second page based on the browsing history record of the second page; Based on the browsing position of the second page, the second page carried by the second column of the second container is displayed.

4. The method according to claim 3, characterized in that, Based on the browsing position of the second page, the second page carried by the second column of the second container is displayed, including: Based on the browsing position of the second page, set the top offset padding-top value of the second page relative to the second column carrying area of ​​the second container; The second page is displayed within the second column's carrying area according to the top offset padding-top value.

5. The method according to claim 3, characterized in that, Before displaying the second page carried by the second column of the second container, the following is also included: Display a transition animation from the first page to the second page.

6. The method according to claim 1 or 2, characterized in that, Also includes: When a swipe up or down command event is detected, the first container intercepts and consumes the swipe up or down command event to execute the step of moving the first container in response to the swipe command; When a left or right swipe command event is detected, the first container passes the left or right swipe command event to the second container. The second container consumes the left or right swipe command event to execute the step of responding to the switching command, hiding the first column carrier area, and displaying the second page carried by the second column carrier area of ​​the second container.

7. The method according to claim 1 or 2, characterized in that, Also includes: After displaying the second page carried by the second column of the second container, the scrollTop value of the first container is reset to its initial value.

8. The method according to claim 1 or 2, characterized in that, Also includes: Set the height of the invisible area corresponding to the page carried by at least one of the multiple columns of the second container to a preset value.

9. A container component, characterized in that, Includes a first container and a second container; wherein, The first container is used to hold the displayed content, which includes multiple controls and the first page held in the first column of the second container. The first container moves in response to a sliding command, and the second container moves with the first container, causing the displayed content to slide out; and the plurality of controls move to a set position on the visual interface in response to the sliding command and remain stationary at the set position, and the sliding distance of the plurality of controls is used as the first sliding distance of the second container on the visual interface; The second container includes multiple columns of carrier areas, each column of carrier area carries a page; a control is associated with a page carried by a column of carrier areas, and page switching is achieved by switching carrier areas through switching controls; the carrier areas other than the first column of carrier areas are hidden. The second container is also used to switch the carrying area in response to a switching command, and in response to the switching command, the difference between the second sliding distance and the first sliding distance of the first page is determined as the historical browsing record of the first page, so as to locate the browsing position of the first page before it was switched away when switching back to the first page.

10. The container assembly according to claim 9, characterized in that, The multiple controls include multiple labels.

11. The container assembly according to claim 9 or 10, characterized in that, The first container moves in a first direction in response to a sliding command, and the second container follows the first container and moves in the first direction. The multiple bearing areas are arranged along the second direction; The second direction is different from the first direction.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed, performs the steps of the interface interaction method as described in any one of claims 1 to 8.

13. An electronic device, characterized in that, It includes a memory, a processor, and a display; wherein the memory is used to store computer programs; The processor is coupled to the memory and the display, and is used to execute the computer program stored in the memory to implement the steps of the interface interaction method as described in any one of claims 1 to 8.

Images