Page interaction method, apparatus and device

Abstract

Disclosed in the present application are a page interaction method, apparatus and device. The method comprises: in response to a sliding operation in a channel region, triggering a plurality of channel tabs in the channel region to move and display following the sliding operation; in response to the stopping of the sliding operation, determining a first channel tab that is currently incompletely displayed on a first side of the channel region; and triggering the plurality of channel tabs in the channel region to move and display such that a second channel tab is aligned with a first preset position in the channel region, wherein the second channel tab is a channel tab located on a second side of the first channel tab and adjacent to the first channel tab.

Description

Page interaction methods, devices and equipment

[0001] Cross-reference to related applications

[0002] This application is based on and claims priority to Chinese application No. 202411899256.0, filed on December 20, 2024, the disclosure of which is incorporated herein by reference in its entirety. Technical Field

[0003] This application relates to the field of Internet technology, specifically to a page interaction method, apparatus, and device. Background Technology

[0004] At the top of the homepage frame of some applications, there is often a channel area that displays multiple channel tabs. Users can quickly access the corresponding channel page by tackling a channel tab. Due to the large number of channel tabs, not all of them may be displayed on the application's homepage. Users can swipe through the channel area to view other channel tabs. Summary of the Invention

[0005] In a first aspect, embodiments of this application provide a page interaction method, the method comprising:

[0006] In response to a swipe operation in the channel area, multiple channel labels in the channel area are triggered to move and be displayed along with the swipe operation;

[0007] In response to the cessation of the sliding operation, it is determined that the first channel label is currently not fully displayed on the first side of the channel area;

[0008] The system triggers the movement and display of multiple channel labels in the channel area to align a second channel label with a first preset position in the channel area. The second channel label is a channel label located on the second side of the first channel label and adjacent to the first channel label.

[0009] Secondly, embodiments of this application provide a page interaction device, the method comprising:

[0010] The first display unit is configured to respond to a sliding operation in the channel area by triggering multiple channel labels in the channel area to move and be displayed along with the sliding operation;

[0011] A determining unit is configured to, in response to the cessation of the sliding operation, determine that a first channel label is currently displayed incompletely on the first side of the channel area;

[0012] The second display unit is used to trigger multiple channel labels in the channel area to move and display to a first preset position so that the second channel label is aligned with the channel area, wherein the second channel label is a channel label located on the second side of the first channel label and adjacent to the first channel label.

[0013] Thirdly, embodiments of this application provide a page interaction device, including: a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the page interaction method as described above.

[0014] Fourthly, embodiments of this application provide a computer-readable storage medium storing instructions that, when executed on a terminal device, cause the terminal device to perform the page interaction method described above.

[0015] Fifthly, embodiments of this application provide a computer program product, including: computer instructions, which, when executed by a processor, implement the above-described page interaction method.

[0016] Sixthly, embodiments of this application provide a computer program, including: instructions, which, when executed by a processor, cause the processor to perform the page interaction method as described above. Attached Figure Description

[0017] Figure 1 is a schematic diagram of the channel area in an embodiment of this application;

[0018] Figure 2(a) is a schematic diagram of the initial state of the channel area;

[0019] Figure 2(b) is a schematic diagram of a user swiping in the channel area;

[0020] Figure 2(c) is a schematic diagram of the channel label display when the sliding operation stops in the related technology;

[0021] Figure 3 is a flowchart of a page interaction method provided in an embodiment of this application;

[0022] Figure 4(a) is a schematic diagram of the first channel label in an embodiment of this application;

[0023] Figure 4(b) is a schematic diagram of the channel label display when the sliding operation stops in an embodiment of this application;

[0024] Figure 5(a) is a schematic diagram of a first preset position in an embodiment of this application;

[0025] Figure 5(b) is a schematic diagram of another first preset position in an embodiment of this application;

[0026] Figure 6 is a schematic diagram of the button to return to the preset channel label in an embodiment of this application;

[0027] Figure 7(a) is a schematic diagram of a third preset position in an embodiment of this application;

[0028] Figure 7(b) is a schematic diagram of another third preset position in an embodiment of this application;

[0029] Figure 8 is a schematic diagram of the channel area display when the slider is moved to the top of the other side of the channel area in an embodiment of this application;

[0030] Figure 9 is a schematic diagram of a page interaction device provided in an embodiment of this application;

[0031] Figure 10 is a schematic diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0032] To make the above-mentioned objectives, features and advantages of the embodiments of this application more apparent and understandable, the embodiments of this application will be further described in detail below with reference to the accompanying drawings and specific implementation methods.

[0033] To facilitate understanding and explanation of the technical solutions provided in the embodiments of this application, the background technology of the embodiments of this application will be described first below.

[0034] At the top of the homepage frame of some applications, there is usually a channel area. This channel area is used to display multiple channel labels. See Figure 1, which shows a schematic diagram of the channel area. In the figure, the area within the dashed box is the channel area, which is used to display multiple channel labels, such as Channel 1, Channel 2, etc.

[0035] Users can quickly access the corresponding channel page by triggering a channel tag. Due to the large number of channel tags, not all of them may be displayed in the channel area on the application's homepage. Users can swipe through the channel area to view other channel tags. See Figure 2(a), which illustrates the initial state of the channel area. When the user does not trigger the channel area, the channel tags are displayed in a preset manner. For example, the channel tags are displayed in a right-aligned manner, where channel 7 is the rightmost channel tag displayed in the initial state. See Figure 2(b), which illustrates a user swiping through the channel area. As the user swipes through the channel area, the channel tags move accordingly. For example, when the user swipes right, multiple channel tags move to the right; when the user swipes left, multiple channel tags move to the left.

[0036] When the user stops swiping, i.e., when the user releases the gesture after swiping the top channel area, the movement of the channel labels also stops, and the channel labels are fixed in the position where the swipe stopped. At this time, some channel labels on both sides of the channel area, especially the channel label currently displayed on the far right of the channel area, may be obscured and not fully displayed. See Figure 2(c), which shows a schematic diagram of the channel label display when the swipe stops. In the dashed box, channel 6, currently displayed on the far right of the channel area, is obscured and not fully displayed.

[0037] Because the channel labels in the top channel area follow the user's swipe exactly, their movement stops as soon as the swipe ends. This means the rightmost channel label cannot be guaranteed to be displayed correctly when the swipe stops, resulting in wasted display space due to the rightmost channel label being displayed incorrectly. Simultaneously, this also reduces the display area of ​​the channel labels on the left side of the channel area. Therefore, the current method of displaying channel labels in the channel area results in invalid displays and wasted display space.

[0038] Based on this, embodiments of this application provide a page interaction method, apparatus, and device. When a user swipes the top channel area, multiple channel labels within the channel area do not completely follow the user's gestures. When the user stops swiping, the first fully displayed channel label on the first side (e.g., the right side) of the channel area is automatically aligned with a first preset position in the channel area. By optimizing the positioning of channel labels within the top channel area when swiping stops, the problem of invalid display of channel labels on one side (e.g., the right side) of the channel area is solved, improving the display area and presentation effect of other channel labels in the channel area, and enhancing the user's perception of operational feedback during swiping.

[0039] To facilitate understanding of the embodiments of this application, a page interaction method provided by the embodiments of this application will be described below with reference to the accompanying drawings.

[0040] Referring to Figure 3, which is a flowchart of a page interaction method provided in an embodiment of this application, as shown in Figure 2, the method may include S301-S303:

[0041] S301: In response to a swipe operation in the channel area, trigger multiple channel labels in the channel area to move and be displayed as the swipe operation occurs.

[0042] This application embodiment can be applied to a client-side application, where a channel area can be displayed on the client's page, such as at the top of the client's homepage. The channel area can display channel tags. When there are many channel tags, it may not be possible to display all of them at once on the client-side page; that is, the total number of channel tags may exceed the number of channel tags displayed in the channel area. Each channel tag can have a preset display order, and the display order, the total number of channel tags, etc., can be set according to actual usage.

[0043] In its initial state, the channel area displays channel labels in a preset manner. For example, the channel labels are right-aligned and displayed in a preset right-to-left order. Understandably, the first channel label in this right-to-left display order is more important; initially, this channel label is displayed on the far right of the channel area. Meanwhile, channel labels on the other side of the channel area may be hidden. For example, continuing to refer to Figure 2(a), there are channel labels 7, 6...0 in the preset right-to-left display order. In the initial state, the first channel label, channel 7, is more important; it is the rightmost channel label displayed in the channel area. Channel labels on the left, such as channel 0 and channel 1, are either completely hidden or partially obscured.

[0044] Similarly, in the initial state, channel labels can be displayed in the channel area in a left-aligned manner according to a preset left-to-right display order, with the first channel label being more important. This application embodiment does not limit the preset method or display order of channel labels in the initial state; it can be set according to actual usage.

[0045] When a user needs to view channel tags, they can trigger a swipe action in the channel area. Upon detecting a swipe action in the channel area, multiple channel tags in the area will move and be displayed accordingly. As the user swipes, the multiple channel tags maintain a preset display order, allowing different channel tags to be displayed within the channel area. For example, initially, the channel area displays the channel tags for channels 1 to 7; as the user swipes right in the channel area, the channel area displays the channel tags for channels 0 to 6.

[0046] S302: In response to the cessation of the sliding operation, determine that the first channel label is currently not fully displayed on the first side of the channel area.

[0047] When the swiping operation stops, an incomplete channel label may be present on the first side of the channel area. This incomplete channel label is designated as the first channel label. In this embodiment, the first side and the second side are opposite sides of the channel area. For example, if the first side is the right side, then the second side is the left side, and vice versa. In subsequent embodiments, the example will be illustrated with the first side as the right side and the second side as the left side.

[0048] For example, in the initial state, when channel labels are displayed in the channel area in a right-aligned manner according to a preset right-to-left display order, it can be determined that the first channel label is currently incompletely displayed on the right side of the channel area. Conversely, in the initial state, when channel labels are displayed in the channel area in a left-aligned manner according to a preset left-to-right display order, it can be determined that the first channel label is currently incompletely displayed on the left side of the channel area.

[0049] Referring to Figure 4(a), a schematic diagram of the first channel label in an embodiment of this application is shown. For example, when the sliding operation stops, the first channel label is within the dashed box, and the channel label for channel 6 displayed on the far right of the channel area is not fully displayed. Therefore, channel 6 is determined to be the first channel label.

[0050] S303: Trigger multiple channel labels in the channel area to move and display to a first preset position so that the second channel label is aligned with the channel area. The second channel label is a channel label located on the second side of the first channel label and adjacent to the first channel label.

[0051] The channel label adjacent to the second side of the first channel label is designated as the second channel label. Referring to Figure 4(b), a schematic diagram of the channel label display when the sliding operation stops is shown in this embodiment. For example, channel 6 displayed on the far right of the channel area is the first channel label, and channel 5, adjacent to channel 6 on its left, is designated as the second channel label. The dashed box shows the second channel label, channel 5. Multiple channel labels in the channel area are triggered to move together to a first preset position that aligns the second channel label with the channel area, i.e., the second channel label is automatically snapped to the first preset position in the channel area.

[0052] The first preset position can be the edge of the area used to display channel labels on the first side of the channel area. In one possible implementation, if the "Return to Preset Channel Label" button is not displayed on the first side of the channel area, the first preset position can be the third edge of the channel area. The third edge can be understood as the edge of the first side of the channel area, such as the right edge of the channel area. For example, referring to Figure 5(a), the dashed line indicates the first preset position. If the first preset position is the right edge of the channel area, then multiple channel labels in the channel area are moved to the right so that the second channel label, channel 5, is aligned with the right edge of the channel area. In another possible implementation, if a "Return to Preset Channel Label" button is displayed on the first side of the channel area, then the first preset position can be the second edge of the "Return to Preset Channel Label" button. The second edge can be understood as the edge of the side adjacent to the channel label, such as the left edge of the "Return to Preset Channel Label" button. For example, referring to Figure 5(b), the dashed line indicates the first preset position. If the first preset position is the left edge of the "Return to Preset Channel Label" button, then multiple channel labels in the channel area are moved to the right so that the second channel label, channel 5, is aligned with the left edge of the "Return to Preset Channel Label" button. The display of the return to preset channel label button can be found in the description of the following embodiments, and will not be repeated here.

[0053] By automatically snapping to adjust the display position of the overall channel labels, the incomplete display of the first channel label (e.g., channel 6) is hidden, maximizing the exposure of the channel labels on the other side. For example, the channel label of channel 0, which was incompletely displayed, is now fully displayed after the adjustment.

[0054] In this embodiment, when a user triggers a swipe operation on a channel area, multiple channel labels in the channel area are moved and displayed accordingly. When the swipe operation stops, it is determined that a first channel label is not fully displayed on the first side (e.g., the right side) of the channel area. The multiple channel labels in the channel area are then moved to a first preset position where the second channel label adjacent to the first channel label on the other side aligns with the channel area. This hides the incomplete first channel label when the swipe stops, and the second channel label and other channel labels begin to be fully displayed at the first preset position in the channel area. This ensures that no invalid channel labels are displayed on the first side of the channel area when the swipe stops, increasing the display area and presentation effect on the other side (e.g., the left side) of the channel area, thereby effectively improving the display utilization rate of channel labels in the channel area.

[0055] When a user triggers a swipe gesture in the channel area, multiple channel labels move and are displayed accordingly. At this time, a button to return to the preset channel label can also be displayed in the third preset position of the channel area.

[0056] In one possible implementation, the page interaction method provided in this application embodiment may further include:

[0057] In response to a swipe gesture in the channel area, a button to return to the preset channel is displayed in the third preset position of the channel area.

[0058] Upon detecting a swipe operation in the channel area, multiple channel labels in the channel area are triggered to move and display simultaneously with the swipe operation. Simultaneously, a "Return to Preset Channel Label" button is displayed at a third preset position in the channel area. This third preset position can be on the first side of the channel area, aligning the "Return to Preset Channel Label" button with the third edge of the channel area. Referring to Figure 6, a schematic diagram of the "Return to Preset Channel Label" button in an embodiment of this application is shown. In the figure, the portion within the dashed box represents the "Return to Preset Channel Label" button displayed at the third preset position in the channel area. For example, the "Return to Preset Channel Label" button can be displayed on the far right side of the channel area, with its right edge aligned with the right edge of the channel area.

[0059] Triggering the "Return to Preset Channel Labels" button can cause multiple channel labels in the channel area to move to their initial state and be displayed in a preset manner. For example, after multiple channel labels in the channel area have moved and been displayed with a swipe operation, responding to the triggering of the "Return to Preset Channel Labels" button can cause multiple channel labels in the channel area to move to the rightmost position of channel 7 in the channel area, where channel 7 is the first channel label in the display order from right to left.

[0060] By using the "Return to Preset Channel Labels" button, you can quickly move multiple channel labels in the channel area to their initial state, revealing the more important channel labels.

[0061] Based on the above embodiments, the specific implementation methods of S302 and S303 will be further described below.

[0062] In one possible implementation, the specific implementation of S302 determining that the first channel label, which is currently not fully displayed on the first side of the channel area, in response to the cessation of the sliding operation may include:

[0063] A1: In response to the pausing of the swipe operation, determine the display position of the channel label in the channel area.

[0064] When the channel labels in the channel area are moved, the channel labels displayed in the channel area and their display positions can be determined. When the swipe operation stops, the display positions of each channel label in the channel area at the time the swipe operation stops can be determined.

[0065] A2: The channel label whose display position overlaps with the second preset position of the channel area is identified as the first channel label.

[0066] If the display position of a certain channel label overlaps with the second preset position of the channel area, it means that the channel label is not displayed completely, and it is identified as the first channel label, thus quickly identifying the first channel label.

[0067] The second preset position can be on the first side of the channel area. In one possible implementation, if the "Return to Preset Channel" button is not displayed on the first side of the channel area, the second preset position can be the third edge of the channel area. For example, as shown in Figure 7(a), the dashed line indicates the second preset position, which is the right edge of the channel area. In another possible implementation, if the "Return to Preset Channel" button is displayed on the first side of the channel area, the second preset position can be the display position of the "Return to Preset Channel" button, specifically, it can be the second edge of the "Return to Preset Channel" button. For example, as shown in Figure 7(b), the dashed line indicates the second preset position, which can be the display position of the "Return to Preset Channel" button.

[0068] In one possible implementation, the specific implementation of A2 determining the channel label whose display position overlaps with a second preset position in the channel area as the first channel label may include:

[0069] The channel label whose display position overlaps with the "Return to Preset Channel Label" button will be identified as the first channel label, and the "Return to Preset Channel Label" button will be displayed in the third preset position in the channel area.

[0070] In practical applications, while multiple channel labels in the channel area are moved and displayed with the swipe operation, a "Return to Preset Channel Label" button is displayed at a third preset position in the channel area. The display positions of each channel label in the channel area can then be compared with the display position of the "Return to Preset Channel Label" button. If the display position of a certain channel label overlaps with the display position of the "Return to Preset Channel Label" button, it means that the channel label is not fully displayed, and this is identified as the first channel label.

[0071] By determining whether the channel label overlaps with the return preset channel label button displayed in the third preset position in the channel area, the incomplete first channel label can be quickly identified.

[0072] In one possible implementation, the specific implementation of S303 triggering the movement and display of multiple channel labels in the channel area to align the second channel label with a first preset position in the channel area may include:

[0073] The multiple channel labels in the trigger channel area are moved and displayed until the second channel label is aligned with the return preset channel label button, which is then displayed in the third preset position in the channel area.

[0074] In practical applications, when multiple channel labels in the channel area are moved and displayed with a swipe operation, a "Return to Preset Channel Label" button is simultaneously triggered to appear at a third preset position in the channel area. This will cause all channel labels in the channel area to move and display together until the second channel label aligns with the "Return to Preset Channel Label" button.

[0075] In one possible implementation, the specific implementation of triggering the movement and display of multiple channel labels in the channel area to align the second channel label with the button to return to the preset channel label may include:

[0076] The multiple channel labels in the trigger channel area are moved and displayed until the first edge of the second channel label is aligned with the second edge of the preset channel label button.

[0077] Furthermore, multiple channel labels in the channel area can be moved and displayed so that the first edge of the second channel label aligns with the second edge of the "Return to Preset Channel Label" button. The first edge can be understood as the edge of the second channel label adjacent to the "Return to Preset Channel Label" button. The second edge can be understood as the edge of the "Return to Preset Channel Label" button adjacent to the channel label. For example, continuing to refer to Figure 4(b), the right edge of the second channel label, channel 5, is aligned with the left edge of the "Return to Preset Channel Label" button.

[0078] Therefore, while displaying the button to return to the preset channel label, it also ensures that when the swipe stops, there are no invalid channel labels displayed on the first side (e.g., the right side) of the channel area, which increases the display area and presentation effect on the other side (e.g., the left side) of the channel area, thereby effectively improving the display utilization rate of channel labels in the channel area.

[0079] When a user triggers a swipe operation in the channel area, there is also a scenario where the swipe reaches the top of either side. In this scenario, the embodiments of this application also provide a corresponding display method for the channel area.

[0080] In one possible implementation, the page interaction method provided in this application embodiment may further include:

[0081] In response to a swipe operation in the channel area, once the third channel label is fully displayed, the "Return to Preset Channel Label" button is removed from the third preset position in the channel area.

[0082] When the channel labels in the channel area are moved and displayed, the position of the displayed channel labels allows you to determine when the third channel label is fully displayed when you slide to the top of the first side of the channel area. The third channel label is the first channel label displayed on the first side of the channel area according to the preset display order. For example, the preset display order from right to left includes channel 7, channel 6... channel 0, with channel 7 being the third channel label. At this point, multiple channel labels in the channel area have moved to their initial state and are displayed in the preset manner, and there is no need to display the "return to preset channel label" button. For example, when you slide to the top right side of the channel area, the third channel label, channel 7, is fully displayed, and the "return to preset channel label" button is no longer displayed, thus showing the initial state of the channel area.

[0083] In one possible implementation, before S302 determines that the first channel label is not fully displayed on the first side of the channel area, the page interaction method provided in this application embodiment may further include:

[0084] In response to the swiping operation stopping, once the fourth channel label is fully displayed, the movement and display of multiple channel labels in the channel area is stopped.

[0085] When the channel labels in the channel area are moved and displayed, the position of the displayed channel labels allows you to determine, by sliding to the top of the other side of the channel area, that the fourth channel label is fully displayed, and the other side of the channel area is the opposite side of the first side of the channel area, for example, the left side of the channel area. The fourth channel label is the first channel label displayed on the other side of the channel area according to a preset display order. For example, the preset display order from right to left includes channel 7, channel 6... channel 0, with channel 0 being the fourth channel label.

[0086] At this point, if the swiping operation stops, the user is more likely to keep the current display content. Even if there is an incomplete display of the first channel label on the first side of the channel area, step S303 is not executed temporarily. Instead, the movement and display of multiple channel labels in the channel area is stopped to avoid gaps in the channel area display. For example, see Figure 8, which shows a schematic diagram of the channel area display when swiping to the top of the other side of the channel area. For example, the fourth channel label is channel 0. There are no other channel labels to the left of channel 0. When the swiping stops, channel 0 is fully displayed, that is, it has swiped to the top left of the channel area, and the movement and display of multiple channel labels in the channel area is stopped. At this time, there may be an incomplete display of the channel label channel 5. Instead of moving all channel labels to the right to hide channel 5, the entire channel label is not moved.

[0087] In this embodiment of the application, when sliding to the top of both sides of the channel area, a corresponding display mode of the channel area is provided, so that the display of the channel area is more in line with the actual needs of the user.

[0088] Those skilled in the art will understand that the schematic diagrams in the above embodiments are merely examples of how the embodiments of this application can be implemented. The scope of application of the embodiments of this application is not limited in any way.

[0089] Based on the page interaction method provided in the above-described method embodiments, this application also provides a page interaction device, which will be described below with reference to the accompanying drawings.

[0090] Referring to Figure 9, this figure is a structural schematic diagram of a page interaction device provided in an embodiment of this application. As shown in Figure 9, the page interaction device includes:

[0091] The first display unit 901 is configured to trigger multiple channel labels in the channel area to move and be displayed in response to a sliding operation in the channel area.

[0092] Determining unit 902 is configured to determine, in response to the cessation of the sliding operation, that a first channel label is currently displayed incompletely on the first side of the channel area;

[0093] The second display unit 903 is configured to trigger multiple channel labels in the channel area to move and display to a first preset position whereby a second channel label is aligned with the channel area, wherein the second channel label is a channel label located on the second side of the first channel label and adjacent to the first channel label.

[0094] In one possible implementation, the determining unit includes:

[0095] The first determining subunit is configured to determine the display position of the channel label in the channel area in response to the cessation of the sliding operation;

[0096] The second determining subunit is configured to determine the channel label that overlaps with the second preset position of the channel area as the first channel label.

[0097] In one possible implementation, the second determining subunit is specifically configured as follows:

[0098] The channel label whose display position overlaps with the return preset channel label button is identified as the first channel label, and the return preset channel label button is displayed at the third preset position in the channel area.

[0099] In one possible implementation, the second display unit is specifically configured as follows:

[0100] The multiple channel labels in the channel area are moved and displayed until the second channel label is aligned with the return preset channel label button, which is then displayed in a third preset position in the channel area.

[0101] In one possible implementation, the second display unit is specifically configured as follows:

[0102] The multiple channel labels in the channel area are triggered to move and display until the first edge of the second channel label aligns with the second edge of the preset channel label button.

[0103] In one possible implementation, the device further includes:

[0104] The third display unit is configured to trigger the display of a return to preset channel label button at a third preset position in the channel area in response to a sliding operation in the channel area.

[0105] In one possible implementation, the device further includes:

[0106] The cancellation display unit is configured to, in response to a sliding operation in the channel area, cancel the display of the return to preset channel label button at the third preset position in the channel area when it is determined that the third channel label is fully displayed.

[0107] In one possible implementation, the device further includes:

[0108] The stop display unit is configured to stop the movement and display of multiple channel labels in the channel area when the fourth channel label is fully displayed in response to the stop of the sliding operation.

[0109] In some embodiments, the second display unit is further configured to trigger the return preset channel label button to trigger the plurality of channel labels in the channel area to move to the initial state and display the plurality of channel labels in a preset manner.

[0110] In some embodiments, the first preset position is located on the first side of the channel area, at the edge of the area used to display the channel label.

[0111] For example, in response to the absence of a return to preset channel label button on the first side of the channel area, the first preset position is the third edge of the channel area.

[0112] For example, in response to the display of a return preset channel label button on the first side of the channel area, the first preset position is the second edge of the return preset channel label button.

[0113] This application also provides a computer program product, including computer program instructions, which, when executed on a computer, cause the computer to perform the page interaction method as described in any of the preceding claims.

[0114] Based on the page interaction method provided in the above embodiments, this application also provides an electronic device, including: one or more processors; a storage device storing one or more programs thereon, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the page interaction method described in any of the above embodiments.

[0115] Referring now to FIG10, a schematic diagram of the structure of an electronic device 1300 suitable for implementing embodiments of this application is shown. The terminal device in embodiments of this application may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Android devices), PMPs (Portable Media Players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs (televisions), desktop computers, etc. The electronic device shown in FIG10 is merely an example and should not impose any limitations on the functionality and scope of use of embodiments of this application.

[0116] As shown in Figure 10, the electronic device 1300 may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 1301, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1302 or a program loaded from a storage device 1306 into a random access memory (RAM) 1303. The RAM 1303 also stores various programs and data required for the operation of the electronic device 1300. The processing unit 1301, ROM 1302, and RAM 1303 are interconnected via a bus 1304. An input / output (I / O) interface 1305 is also connected to the bus 1304.

[0117] Typically, the following devices can be connected to I / O interface 1305: input devices 1306 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 1307 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 1306 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1309. Communication device 1309 allows electronic device 1300 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 10 shows electronic device 1300 with various devices, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0118] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 1309, or installed from storage device 1306, or installed from ROM 1302. When the computer program is executed by processing device 1301, it performs the functions defined in the methods of embodiments of this application.

[0119] The electronic device provided in this application embodiment and the page interaction method provided in the above embodiment belong to the same inventive concept. Technical details not described in detail in this embodiment can be found in the above embodiment, and this embodiment has the same beneficial effects as the above embodiment.

[0120] Based on the page interaction method provided in the above embodiments, this application provides a computer-readable medium storing a computer program thereon, wherein the program, when executed by a processor, implements the page interaction method as described in any of the above embodiments.

[0121] It should be noted that the computer-readable medium described in the embodiments of this application can be a computer-readable signal medium, a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In the embodiments of this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the embodiments of this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0122] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol), and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and end-to-end networks (e.g., ad hoc end-to-end networks), as well as any currently known or future-developed networks.

[0123] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0124] The aforementioned computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to perform the aforementioned page interaction method.

[0125] Computer program code for performing the operations of the embodiments of this application can be written in one or more programming languages ​​or a combination thereof. These programming languages ​​include, but are not limited to, object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0126] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0127] The units described in the embodiments of this application can be implemented in software or hardware. The names of the units / modules do not necessarily limit the specific unit itself.

[0128] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0129] In the context of embodiments of this application, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. Machine-readable media can include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0130] It should be noted that the various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the systems or apparatus disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple, and relevant parts can be referred to the method section.

[0131] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0132] It should also be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0133] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.

[0134] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A page interaction method, comprising: In response to a swipe operation in the channel area, multiple channel labels in the channel area are triggered to move and be displayed along with the swipe operation; In response to the cessation of the sliding operation, it is determined that the first channel label is currently not fully displayed on the first side of the channel area; The system triggers the movement and display of multiple channel labels in the channel area to align a second channel label with a first preset position in the channel area. The second channel label is a channel label located on the second side of the first channel label and adjacent to the first channel label.

2. The page interaction method according to claim 1, wherein, The step of determining that a first channel label is currently incompletely displayed on the first side of the channel area in response to the cessation of the sliding operation includes: In response to the cessation of the sliding operation, the display position of the channel label in the channel area is determined; The channel label whose display position overlaps with the second preset position of the channel area is determined as the first channel label.

3. The page interaction method according to claim 2, wherein, The step of determining the channel label whose display position overlaps with the second preset position of the channel area as the first channel label includes: The channel label whose display position overlaps with the return preset channel label button is identified as the first channel label, and the return preset channel label button is displayed at the third preset position in the channel area.

4. The page interaction method according to any one of claims 1-3, wherein, The step of triggering the movement and display of multiple channel labels in the channel area to align the second channel label with a first preset position in the channel area includes: The multiple channel labels in the channel area are triggered to move and display until the second channel label is aligned with the return preset channel label button, which is displayed in a third preset position in the channel area.

5. The page interaction method according to claim 4, wherein, The step of triggering the movement and display of the plurality of channel labels in the channel area to align the second channel label with the button to return to the preset channel label includes: The multiple channel labels in the channel area are triggered to move and display until the first edge of the second channel label aligns with the second edge of the return preset channel label button.

6. The page interaction method according to any one of claims 1-5, further comprising: In response to a swipe operation in the channel area, a button to return to the preset channel is displayed at a third preset position in the channel area.

7. The page interaction method according to any one of claims 1-6, further comprising: In response to a sliding operation in the channel area, when it is determined that the third channel label is fully displayed, the "Return to Preset Channel Label" button is removed from the third preset position in the channel area.

8. The page interaction method according to any one of claims 1-7, further comprising: Before determining that the first channel label is not fully displayed on the first side of the channel area, in response to the cessation of the sliding operation, when it is determined that the fourth channel label is fully displayed, the movement and display of the plurality of channel labels in the channel area is stopped.

9. The page interaction method according to any one of claims 2-7, further comprising: Triggering the return preset channel label button will cause the multiple channel labels in the channel area to move to the initial state and be displayed in a preset manner.

10. The page interaction method according to any one of claims 1-9, wherein, The first preset position is located on the first side of the channel area, at the edge of the area used to display the channel label.

11. The page interaction method according to claim 10, wherein, In response to the absence of a return to preset channel label button on the first side of the channel area, the first preset position is the third edge of the channel area.

12. The page interaction method according to claim 10 or 11, wherein, In response to the display of a return preset channel label button on the first side of the channel area, the first preset position is the second edge of the return preset channel label button.

13. A page interaction device, comprising: The first display unit is configured to, in response to a sliding operation in the channel area, trigger multiple channel labels in the channel area to move and be displayed along with the sliding operation; The determining unit is configured to determine, in response to the cessation of the sliding operation, that a first channel label is currently displayed incompletely on the first side of the channel area; The second display unit is configured to trigger multiple channel labels in the channel area to move and display to a first preset position whereby a second channel label is aligned with the channel area, wherein the second channel label is a channel label located on the second side of the first channel label and adjacent to the first channel label.

14. A page interaction device, comprising: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements the page interaction method as described in any one of claims 1-12.

15. A computer-readable storage medium, wherein, The computer-readable storage medium stores instructions that, when executed on a terminal device, cause the terminal device to perform the page interaction method as described in any one of claims 1-12.

16. A computer program comprising: Instructions, when executed by a processor, cause the processor to perform the page interaction method as described in any one of claims 1 to 12.

Images