WO2019134344A1

WO2019134344A1 - Interface operation processing method and apparatus, electronic device, and storage medium

Info

Publication number: WO2019134344A1
Application number: PCT/CN2018/090296
Authority: WO
Inventors: 李凯达; 张文明; 陈少杰
Original assignee: 武汉斗鱼网络科技有限公司
Priority date: 2018-01-02
Filing date: 2018-06-07
Publication date: 2019-07-11
Also published as: CN108021323A

Abstract

The present invention relates to the technical field of display, and provides an interface operation processing method and apparatus, an electronic device, and a storage medium. The interface operation processing method is applied to an electronic device. The interface operation processing method comprises: displaying a first display interface on a touch display unit of the electronic device, wherein the touch display unit comprises a first display region used for displaying a header region on the first display interface, and a second display region used for displaying a first content region corresponding to a first content in the first display interface; obtaining a first sliding operation performed on the touch display unit; determining, in response to the first sliding operation, whether the first display region is in a first preset region on the touch display unit; and if yes, displaying a second content region corresponding to a second content different from the first content in the second display region in the process of maintaining the header region to be displayed in the first preset region. By means of the interface operation processing method, the sliding operation in the display interface can be well processed.

Description

Interface operation processing method, device, electronic device and storage medium

Cross-reference to related applications

The present application claims priority to Chinese Patent Application No. CN2018100011803, entitled "Interface Operation Processing Method, Apparatus, Electronic Device and Storage Medium", filed on January 2, 2018, the entire contents of which are incorporated by reference. In this application.

Technical field

The present disclosure relates to the field of display technologies, and in particular, to an interface operation processing method, apparatus, electronic device, and storage medium.

Background technique

In some softwares, the display interface displays the first area at the top, the structure of the second area at the bottom, and the structure of displaying more than three areas on the display interface. When the user scrolls one of the areas (scrolling area), the other areas change positions synchronously, so that each area scrolls simultaneously with the scrolling area. In this implementation, each time scrolling requires multiple parameters to be synchronized to achieve synchronization between the regions and the scrolling region. For poorly performing electronic devices, frame dropping may occur, and scrolling in the display interface may be uncoordinated.

Summary of the invention

In view of this, the present disclosure provides an interface operation processing method, apparatus, electronic device, and storage medium.

In order to achieve at least one or part of the above objects, the technical solution adopted by the present disclosure is as follows:

In a first aspect, the present disclosure provides an interface operation processing method, which is applied to an electronic device, the method comprising: displaying a first display interface on a touch display unit of the electronic device, wherein the touch The display unit includes a first display area for displaying a head area on the first display interface, and a second display area for displaying a first content area corresponding to the first content in the first display interface; a first sliding operation performed on the touch display unit; determining, in response to the first sliding operation, whether the first display area is in a first preset area on the touch display unit; In the process of keeping the head region displayed in the first preset area, a second content area corresponding to the second content different from the first content is displayed in the second display area.

Optionally, in response to the first sliding operation, determining whether the first display area is in the first preset area on the touch display unit comprises:

Determining, in response to the first sliding operation, whether a first sliding distance corresponding to the first sliding operation is greater than or equal to a difference between a third height and a fourth height of an actual display area in the first display interface, wherein a sum of a first height of the first display area and a second height of the second display area is the third height;

When yes, indicating that the first display area is on the first preset area on the touch display unit;

When it is no, it indicates that the first display area is not in the first preset area.

Optionally, in the responsive to the first sliding operation, determining whether the first display area is after the first preset area on the touch display unit, the method further includes:

In the case of NO, in the process of keeping the head region displayed in the second preset region, displaying a third content region corresponding to the third content different from the first content in the second display region, The area of the second preset area is larger than the area of the first preset area.

When it is no, determining whether a distance of an upper edge of the second display area from an upper edge of the first display interface is greater than a preset distance;

When YES, a fourth content area corresponding to the fourth content different from the first content is displayed in the second display area.

Optionally, in the process of maintaining the display of the head region in the first preset region, displaying, in the second display region, a second content region corresponding to the second content different from the first content Thereafter, the method further includes:

Determining whether the second content is the currently stored content for the bottom of the data source displayed in the second display area;

When YES, the load data is retrieved and stored in the data source.

Obtaining a second sliding operation performed on the touch display unit;

Determining, in response to the second sliding operation, whether the second content area is in a third preset area on the touch display unit;

When YES, the second content area is stored, and a fifth content area corresponding to the fifth content different from the second content is displayed in the second display area.

Optionally, displaying the first display interface on the touch display unit of the electronic device includes:

The ScrollableTabView is nested in the ScrollView in the React Native list, and a custom header and a ScrollableTabView are placed in the ScrollView, where the header is the header area and the ScrollableTabView is the content area.

Optionally, if the first display area is not in the first preset area on the touch display unit, perform the following settings:

The ScrollView is a state in which the scrolling is unlocked, and the ScrollableTabView is a state in which the scrolling is locked, and when the operation performed on the touch display unit is obtained, the entire ScrollView is scrolled.

Optionally, if the first display area is in the first preset area on the touch display unit, perform the following settings:

The ScrollView locks the scroll, and the ScrollableTabView unlocks the scroll to make the head area fixed in the first preset area display, and realizes scrolling browsing of the content area.

Optionally, the method further includes:

In the state of scrolling from the ScrollView, the ScrollableTabView is locked and scrolled, and the ScrollView is locked and scrolled. When the ScrollableTabView is unlocked, the ScrollableTabView is scrolled to the position of the ScrollableTabView in the initial display interface.

Optionally, the second display area includes a plurality of content areas, and the method further includes: displaying, by the horizontal scrolling, each of the content areas to be displayed on the second display area.

In a second aspect, the present disclosure provides an interface operation processing device, which is applied to an electronic device, where the device includes: an interface display module, a first operation acquisition module, a first operation response module, and a first execution module, where The interface display module is configured to display a first display interface on the touch display unit of the electronic device, where the touch display unit includes a first portion for displaying a head region on the first display interface a display area, and a second display area for displaying a first content area corresponding to the first content in the first display interface; the first operation obtaining module is configured to obtain a first performed on the touch display unit a sliding operation; the first operation response module is configured to determine, according to the first sliding operation, whether the first display area is in a first preset area on the touch display unit; When the first display area is in the first preset area on the touch display unit, in the process of maintaining the display of the head area in the first preset area, The second display area different from the first content and a second content corresponding to the second content region.

Optionally, the first operation response module includes a first determining unit and a determining executing unit, where

The first determining unit is configured to determine, according to the first sliding operation, whether the first sliding distance corresponding to the first sliding operation is greater than or equal to a third height and a first display area of the first display interface a difference of four heights, wherein a sum of a first height of the first display area and a second height of the second display area is the third height;

The determination execution unit is configured to determine that the first sliding distance corresponding to the first sliding operation is greater than or equal to a difference between the third height and a fourth height of the actual display area in the first display interface a first preset area of the display area on the touch display unit;

The determination execution unit is further configured to determine that the first sliding distance corresponding to the first sliding operation is not greater than or equal to a difference between the third height and a fourth height of the actual display area in the first display interface The first display area is not in the first preset area.

Optionally, the device further includes a second execution module, where the second execution module is configured to maintain the first display area when the first display area is not in the first preset area on the touch display unit a third content area corresponding to the third content different from the first content is displayed in the second display area in the process of displaying the head area in the second preset area, wherein the second preset area The area is larger than the area of the first predetermined area.

Optionally, the device further includes a third execution module and a fourth execution module, wherein the third execution module is configured to be when the first display area is not in a preset area on the touch display unit Determining whether a distance of an upper edge of the first content area from an upper edge of the first display interface is greater than a preset distance; the fourth execution module is configured to be located at an upper edge of the first content area When the distance of the upper edge of the first display interface is greater than the preset distance, the fourth content area corresponding to the fourth content different from the first content is displayed in the second display area.

Optionally, the device further includes a fifth execution module and a sixth execution module, wherein the fifth execution module is configured to determine whether the second content is currently stored and configured to be displayed in the second display area The content of the bottom of the data source; the sixth execution module is configured to acquire the loading data when the second content is the currently stored content configured to be displayed at the bottom of the data source of the second display area And storing the load data in the data source.

Optionally, the device further includes a second operation obtaining module, a second operation response module, and a seventh execution module, wherein the second operation obtaining module is configured to obtain a second performed on the touch display unit a sliding operation; the second operation response module is configured to determine, according to the second sliding operation, whether the second content area is in a third preset area on the touch display unit; When the second content area is in the third preset area on the touch display unit, storing the second content area, and displaying a second content different from the second content in the second display area The fifth content area corresponding to the five contents.

In a third aspect, the present disclosure provides an electronic device including a memory and a processor, the memory storing computer instructions that, when the computer instructions are read and executed by the processor, cause the The processor executes the interface operation processing method provided by the above first aspect.

In a fourth aspect, the present disclosure provides a storage medium having stored therein computer instructions, wherein the computer instructions, when being read and executed, perform the interface operation processing method provided by the first aspect.

In a fifth aspect, the present disclosure provides an interface operation processing method, which is applied to an electronic device, where the method includes:

Obtaining a first sliding operation on the touch display unit of the electronic device, the touch display unit is configured to display a first display interface, wherein the touch display unit comprises a first display for displaying a first display area of the head area on the interface, and a second display area for displaying a content area corresponding to the content in the first display interface;

Determining, in response to the first sliding operation, whether the first display area of the touch display unit is in a first preset area on the touch display unit;

If the first display area of the touch display unit is in the first preset area on the touch display unit, keep the head area displayed in the first preset area, and in the second The display area displays a content area corresponding to content different from the previous content.

The interface operation processing method, device, electronic device and storage medium provided by the present disclosure, the first display interface is displayed on the touch display unit of the electronic device, wherein the touch display unit comprises a head for displaying the first display interface a first display area of the portion area, and a second display area for displaying the first content area corresponding to the first content in the first display interface, and then obtaining a first sliding operation performed on the touch display unit, and then responding a first sliding operation, determining whether the first display area is in the first preset area on the touch display unit, and finally, when YES, in the process of maintaining the head area displayed in the first preset area, in the second The display area displays a second content area corresponding to the second content different from the first content. The interface operation processing method, the device, the electronic device, and the storage medium display the head region in the preset region when the head region in the display interface is in the preset region, and display the content corresponding to the content different from the previous content. The area, so as to avoid the parameter being transmitted multiple times each time the content area is scrolled to achieve synchronization between the head area and the content area, causing the electronic device with poor performance to drop frames, and the scrolling in the display interface is not coordinated.

The above described objects, features, and advantages of the present invention will become more apparent from the description of the appended claims.

DRAWINGS

The present invention will be clearly and completely described in the following with reference to the accompanying drawings in the present disclosure. Instead of all the embodiments. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments of the present disclosure without departing from the inventive scope are the scope of the disclosure.

FIG. 1 is a block schematic diagram of an electronic device provided by the present disclosure;

2 is a flow chart showing an interface operation processing method provided by the present disclosure;

FIG. 3 is a flowchart of step S130 in the interface operation processing method provided by the present disclosure;

4 is a block diagram of an interface operating device provided by the present disclosure;

FIG. 5 is a block diagram showing a first operational response module in the interface operating device provided by the present disclosure.

Detailed ways

The technical solutions in the present disclosure are clearly and completely described in the following with reference to the accompanying drawings in the present disclosure. It is obvious that the described embodiments are only a part of the embodiments of the present disclosure, and not all of the embodiments. The components of the present disclosure, which are generally described and illustrated in the figures herein, can be arranged and designed in a variety of different configurations. The detailed description of the embodiments of the present disclosure, which is set forth in the claims All other embodiments obtained by a person skilled in the art based on the embodiments of the present disclosure without creative efforts are within the scope of the present disclosure.

It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings. Meanwhile, in the description of the present disclosure, the terms "first", "second", and the like are used merely to distinguish a description, and are not to be construed as indicating or implying a relative importance.

FIG. 1 shows a structural block diagram of an electronic device applicable to the present disclosure. As shown in FIG. 1 , the electronic device 100 includes a memory 102 , a memory controller 104 , one or more (only one shown) processor 106 , a peripheral interface 108 , a radio frequency module 110 , an audio module 112 , and a touch display . Unit 114 and the like. These components communicate with one another via one or more communication bus/signal lines 116.

The memory 102 can be used to store software programs and modules, such as interface operation processing methods and apparatus corresponding to the program instructions/modules in the present disclosure, and the processor 106 executes various functional applications by running software programs and modules stored in the memory 102. And data processing, such as the interface operation processing method provided by the present disclosure.

Memory 102 can include high speed random access memory and can also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. Access to the memory 102 by the processor 106 and other possible components can be performed under the control of the memory controller 104.

Peripheral interface 108 couples various input/output devices to processor 106 and memory 102. In some embodiments, peripheral interface 108, processor 106, and memory controller 104 can be implemented in a single chip. In other instances, they can be implemented by separate chips.

The radio frequency module 110 is configured to receive and transmit electromagnetic waves, and realize mutual conversion between electromagnetic waves and electric signals, thereby communicating with a communication network or other devices.

The audio module 112 provides an audio interface to the user, which may include one or more microphones, one or more speakers, and audio circuitry.

The touch display unit 114 provides a display interface between the electronic device 100 and the user. Specifically, the touch display unit 114 displays video output to the user, and the content of the video output may include text, graphics, video, and any combination thereof; and the touch display unit 114 further receives a sliding operation performed by the user.

It will be understood that the structure shown in FIG. 1 is merely illustrative, and the electronic device 100 may further include more or less components than those shown in FIG. 1, or have a different configuration than that shown in FIG. The components shown in Figure 1 can be implemented in hardware, software, or a combination thereof.

In RN (React Native), only a fixed-top view can be used as the head header, and the lower list is hollowed out as the header height. Among them, RN is an open source cross-platform mobile application development framework. When the list scrolls, the upper view synchronizes to change position, so that the head scrolls with the list at the same time. However, since this structure framework is not in the same frame as the list, such scrolling requires multiple parameters to be passed, resulting in synchronous scrolling off frames, scrolling images being uncoordinated, and the like.

First embodiment

FIG. 2 shows a flow chart of an interface operation processing method provided by the present disclosure. The interface operation processing method can be applied to the electronic device 100 shown in FIG. 1. Referring to Figure 2, the method includes:

Step S110: Display a first display interface on the touch display unit of the electronic device, where the touch display unit includes a first display area for displaying a head area on the first display interface, and And a second display area for displaying a first content area corresponding to the first content in the first display interface.

In the present disclosure, a ScrollableTabView (sub-list) can be nested in the ScrollView (parent list) in the RN list, the target effect can be achieved by processing the gesture, the pull-down refresh is implemented in the ScrollView, and the scrollView is placed in the ScrollView. The custom header and ScrollableTabView implement a pull-up refresh in each child tab of the ScrollableTabView. Among them, the header can be understood as the header area, and the ScrollableTabView can be understood as the content area. Thereby, the head area and the content area are placed in the same structural frame.

Specifically, the framework can be built using the npm (Node Package Manager) plugin to introduce the ScrollableTabView, and the following structure is established:

First, the first display interface can be displayed on the touch display unit of the electronic device. The touch display unit is configured to display a first display area of the head area on the first display interface, and a second display area for displaying the first content area corresponding to the first content in the first display interface. The header area and the first content area can be understood as the header and the ScrollableTabView described above, respectively.

Step S120: Obtain a first sliding operation performed on the touch display unit.

When the user operates the first display interface, the user can perform a sliding operation on the touch display unit. Therefore, the touch display unit can sense the first sliding operation performed by the user. There are a plurality of implementations of the first sliding operation. In the present disclosure, the first sliding operation is a functional naming, not an action limitation. For example, the user can continuously slide in the set direction on the touch display unit to implement the first sliding operation. For another example, the user can perform a continuous click of the set number of times on the touch display unit to complete the first sliding operation. For another example, the user can operate a setting button on the touch display unit to implement the first sliding operation.

Step S130: Determine, according to the first sliding operation, whether the first display area is in a first preset area on the touch display unit.

After obtaining the first sliding operation performed by the user, determining whether the first display area of the display head region is in the first preset area on the touch display unit, that is, determining whether the head area in the first display interface is The specified first preset area.

In the present disclosure, the first preset area may be an area near the top of the touch display unit.

In the present disclosure, referring to FIG. 3, in a case where the first sliding operation is continuously sliding in a set direction, step S130 may include:

Step S131: determining, according to the first sliding operation, whether the first sliding distance corresponding to the first sliding operation is greater than or equal to a difference between the third height and a fourth height of the actual display area in the first display interface, The sum of the first height of the first display area and the second height of the second display area is the third height.

In the present disclosure, the variable offsetY can be defined, and e.nativeEvent.contentOffset.y is assigned an offsetY. The offsetY is used to indicate the sliding distance of the ScrollView, that is, the sliding distance corresponding to the sliding operation performed by the user.

In this disclosure, you can define the variable showScrollViewHeight and assign e.nativeEvent.layoutMeasurement.height to showScrollViewHeight. The contentHeight is used to indicate the display height of the ScrollView, that is, the height of the actual display area in the first display interface.

In this disclosure, you can define the variable ontentHeight and assign e.nativeEvent.contentSize.height to contentHeight. The contentHeight represents the height of the entire ScrollView, that is, the sum of the height of the first display area and the height of the second display area (the third height).

In response to the first sliding operation, the first sliding distance corresponding to the first sliding operation, that is, the value of the variable offsetY, may be acquired; and the sum of the first height of the first display area and the second height of the second display area may be acquired. That is, the value of the above variable contentHeight; the fourth height of the actual display area in the first display interface, that is, the value of the above-mentioned variable showScrollViewHeight can be obtained.

Then, it is determined whether the first sliding distance corresponding to the first sliding operation is greater than or equal to the difference between the third height and the fourth height of the actual display area in the first display interface, that is, whether the offsetY is greater than or equal to the contentHeight minus the showScrollViewHeight. value.

Step S132: When YES, the first sliding distance corresponding to the first sliding operation is greater than or equal to the difference between the third height and the fourth height of the actual display area in the first display interface, indicating the first display area a first preset area on the touch display unit; if not, the first sliding distance corresponding to the first sliding operation is less than the third height and the fourth height of the actual display area in the first display interface The difference indicates that the first display area is not in the first preset area.

It can be understood that, when the result of the determination in step S131 is that the first sliding distance corresponding to the first sliding operation is greater than or equal to the difference between the third height and the fourth height, the first display area is displayed on the touch display unit. a predetermined area; when the result of the determination in step S131 is that the first sliding distance corresponding to the first sliding operation is smaller than the difference between the third height and the fourth height, the first display area is not the first on the touch display unit. Preset area. Thereby, a determination result of whether the first display area is on the first preset area on the touch display unit is obtained.

Step S140: When YES, the first sliding distance corresponding to the first sliding operation is greater than or equal to the difference between the third height and the fourth height of the actual display area in the first display interface, while maintaining the head area In the process of displaying in the first preset area, a second content area corresponding to the second content different from the first content is displayed in the second display area.

In the present disclosure, when the result of the determination in step S130 is that the first display area is in the first preset area of the touch display unit, it may indicate that the head area in the first display interface has been scrolled up to the designated area. Therefore, the head area can be maintained in the first preset area, and the second content area corresponding to the second content different from the first content is displayed in the second display area, that is, the content of the ScrollableTabView is displayed. Therefore, when the head region is located in the first preset area, the head area is kept displayed in the first preset area, and the synchronization of the head area and the content area is not performed every time the content area is scrolled, and the content area is scrolled each time. When the parameter is not required to be transmitted multiple times to synchronize the head area and the content area, it is not necessary to perform frequent data transfer for the first display area, and only the content area corresponding to the content different from the previous content is displayed in the second display area. Thereby avoiding frequent data transfer and avoiding problems such as sliding out of sync.

In the present disclosure, when the head region does not reach the first preset area, the ScrollView is in a state of unlocking scrolling, and the ScrollableTabView is in a state of locking scrolling, and at this time, for the scrolling operation, scrolling for the entire ScrollView.

After the head area reaches the first preset area, the ScrollView locks the scroll, and the ScrollableTabView unlocks the scroll, so that the head area is fixed in the first preset area, and the user can scroll the content area to implement scrolling of the content area. . In addition, in the state of scrolling from the ScrollView, the ScrollableTabView is locked and scrolled, and the ScrollView is locked and scrolled. When the ScrollableTabView is unlocked, the ScrollableTabView is scrolled to the position of the ScrollableTabView in the initial display interface. Prevents anomalies in gesture interception.

In the present disclosure, when the user performs the upsliding, but the head area does not reach the first preset area, the ScrollView can be kept in the unlocked state, and the ScrollableTabView is in the locked scrolling state, so that the entire ScrollView is scrolled up. And updating the content area in the second display area. Therefore, the interface operation processing method may further include:

In the case of no, the first sliding distance corresponding to the first sliding operation is smaller than the difference between the third height and the fourth height of the actual display area in the first display interface, while maintaining the head area at the second preset a third content area corresponding to the third content different from the first content is displayed in the second display area, wherein an area of the second preset area is greater than the first pre- Set the area of the area.

It can be understood that, when the entire ScrollView is scrolled upward, the area of the first display area is gradually reduced, but the first display area does not reach the first preset area, and therefore the area of the second preset area is larger than the first preset area. Area. In addition, the area of the content area is increased, and the content area displays more content.

In the present disclosure, after the first display area reaches the first preset area, when scrolling down to a certain position, the scroll view is returned to the unlocked state, and the ScrollableTabView is the locked scrolling state. Specifically, e.nativeEvent.contentOffset.y is assigned lastOneOffsetY, which represents the scrolling height of the content area. When it is determined that the value of lastOneOffsetY is 0 when the slide is down, it indicates that the content area is scrolled to the position of the initial display interface, then the ScrollView is the state of unlocking the scroll, and the ScrollableTabView is the state of the lock scrolling.

When the user's sliding operation is performed and pulled down to a certain position, the content area of the second display area in the first display interface may be refreshed. Therefore, the interface operation processing method may further include:

When the first display area is not in the first preset area on the touch display unit, determining whether the distance of the upper edge of the second display area from the upper edge of the first display interface is greater than a preset And displaying a fourth content different from the first content in the second display area when a distance from an upper edge of the second display area to an upper edge of the first display interface is greater than a preset distance The fourth content area.

It can be understood that when the upper edge of the second content area is pulled down to a certain distance from the upper edge of the first display interface, the refreshControl in the ScrollView is called, and the pull-down refresh is processed in the method, and only the current content area is processed. Refresh.

After the user continues to slide up and then scrolls the content area in the second display area to the bottom after step S140, the data of the content area needs to be loaded. Therefore, the boundary operation processing method may further include:

Determining whether the second content is the currently stored content for the bottom of the data source displayed in the second display area; when YES, acquiring the loading data and storing the loading data in the data source in.

It can be understood that when the ScrollView is in the state of locked scrolling, and the ScrollableTabView is in the state of unlocking the scrolling, if the user slides down so that the data source corresponding to the content area in the second display area has reached the bottom, the data of the data source needs to be loaded. . It is possible to call onEndReached to page load the data so that when scrolling down, the content can be displayed in the second display area.

In the present disclosure, when there are a plurality of content regions in the second display region, each content region can be switched and displayed on the second display region by using horizontal scrolling.

In the present disclosure, the interface operation processing method may further include: obtaining a second sliding operation performed on the touch display unit; and determining, in response to the second sliding operation, whether the second content area is in the touch Controlling a third preset area on the display unit; when YES, storing the second content area, and displaying a fifth content area corresponding to the fifth content different from the second content in the second display area .

As an optional implementation manner, the third preset area is a display area near the left and right sides, and when the second content area is horizontally to the third preset area, the content area is switched, and the second content is implemented. The area storage allows the user to continue browsing in the previous location when switching back to the second content area.

The interface operation processing method provided by the first embodiment of the present disclosure constructs the above-mentioned framework by the nesting of the list and the processing of the gesture, so that the scrolling in the display interface becomes the scrolling of the entire display interface or only the scrolling of the content area. When the head area in the display interface is in the preset area, the head area is kept displayed in the preset area, and the content area corresponding to the content different from the previous content is displayed, and there is no frequent data transmission, and no sliding is caused. Unsynchronized and other issues. Therefore, each time the content area is scrolled, the parameter is transmitted multiple times to synchronize the head area with the content area, which may cause the electronic device with poor performance to drop frames, and the scrolling in the display interface is uncoordinated.

Second embodiment

The second embodiment of the present disclosure provides an interface operation processing apparatus that can be applied to the electronic device 100 shown in FIG. 1. Referring to FIG. 4 , the interface operation processing apparatus 200 includes an interface display module 210 , a first operation acquisition module 220 , a first operation response module 230 , and a first execution module 240 . The interface display module 210 is configured to display a first display interface on the touch display unit of the electronic device, where the touch display unit includes a head region for displaying the first display interface. a first display area, and a second display area for displaying a first content area corresponding to the first content in the first display interface; the first operation obtaining module 220 is configured to obtain the touch display unit Performing a first sliding operation; the first operation response module 230 is configured to determine, according to the first sliding operation, whether the first display area is in a first preset area on the touch display unit; The first execution module 240 is configured to keep the display of the head region in the first preset region when the first display area is in the first preset area on the touch display unit. And displaying, in the second display area, a second content area corresponding to the second content different from the first content.

In the present disclosure, referring to FIG. 5, the first operation response module 230 may include a first determining unit 231 and a decision executing unit 232. The first determining unit 231 is configured to determine, according to the sliding operation, whether the first sliding distance corresponding to the first sliding operation is greater than or equal to a third height and an actual display area in the first display interface. a difference in a fourth height, wherein a sum of a first height of the first display area and a second height of the second display area is the third height; the determination execution unit 232 is configured to When the first sliding distance corresponding to a sliding operation is greater than or equal to the difference between the third height and the fourth height of the actual display area in the first display interface, indicating that the first display area is on the touch display unit a first preset area; the determination execution unit 232 is further configured to: in the first sliding distance corresponding to the first sliding operation, not greater than or equal to a third height and an actual display area in the first display interface When the difference in height is four, it indicates that the first display area is not in the first preset area.

In the present disclosure, the interface operation processing device 200 may further include a second execution module, when the first display area is not in the first preset area on the touch display unit, a third content area corresponding to the third content different from the first content is displayed in the second display area while the display of the head area is displayed in the second preset area, wherein the second The area of the preset area is larger than the area of the first preset area.

In the present disclosure, the interface operation processing apparatus 200 may further include a third execution module and a fourth execution module. The third execution module is configured to determine that an upper edge of the first content area is from an upper edge of the first display interface when the first display area is not in a preset area on the touch display unit. Whether the distance is greater than the preset distance; the fourth execution module is configured to display in the second display area when the distance of the upper edge of the first content area from the upper edge of the first display interface is greater than a preset distance a fourth content area corresponding to the fourth content different from the first content.

In the present disclosure, the interface operation processing apparatus 200 may further include a fifth execution module and a sixth execution module. The fifth execution module is configured to determine whether the second content is the currently stored content for displaying the bottom of the data source in the second display area, and the sixth execution module is configured to use the second content. When the currently stored content for the bottom of the data source displayed in the second display area is acquired, the load data is acquired and stored in the data source.

In the present disclosure, the interface operation processing apparatus 200 may further include a second operation obtaining module, a second operation response module, and a seventh execution module. The second operation obtaining module is configured to obtain a second sliding operation performed on the touch display unit; and the second operation response module is configured to determine, according to the second sliding operation, whether the second content area is in the a third preset area on the touch display unit; the seventh execution module is configured to store the second content area when the second content area is in the third preset area on the touch display unit, And displaying, in the second display area, a fifth content area corresponding to the fifth content different from the second content.

For the implementation and working principle of the interface operation processing apparatus 200 in the present disclosure, refer to the interface operation processing method in the first embodiment, and thus no further description is provided herein.

Third embodiment

A third embodiment of the present disclosure provides an electronic device 100. Referring to FIG. 1, the electronic device 100 includes a memory 102 and a processor 106, the memory 102 storing computer instructions when the computer instructions are processed by the When the processor 106 reads and executes, the processor 106 is caused to execute the interface operation processing method provided by the first embodiment of the present disclosure.

Fourth embodiment

A fourth embodiment of the present disclosure provides a storage medium in which computer instructions are stored, wherein the computer instructions, when being read and executed, perform the interface operation processing method provided by the first embodiment of the present disclosure.

Fifth embodiment

The fifth embodiment of the present disclosure provides an interface operation processing method, which is applied to an electronic device, and the method includes: obtaining a first sliding operation performed on a touch display unit of the electronic device, where the touch The display unit is configured to display a first display interface, wherein the touch display unit includes a first display area for displaying a head area on the first display interface, and is configured to display the first display interface A second display area of the content area corresponding to the content. In response to the first sliding operation, determining whether the first display area of the touch display unit is in the first preset area on the touch display unit. If the first display area of the touch display unit is in the first preset area on the touch display unit, keep the head area displayed in the first preset area, and in the second The display area displays a content area corresponding to content different from the previous content.

For the implementation and working principle of the interface operation processing method in the present disclosure, refer to the interface operation processing method in the first embodiment, and thus no further description is provided herein.

In summary, the interface operation processing method, device, electronic device, and storage medium provided by the present disclosure display the first display interface on the touch display unit of the electronic device, wherein the touch display unit includes the first display a first display area of the head area on the display interface, and a second display area for displaying the first content area corresponding to the first content in the first display interface, and then obtaining the first performed on the touch display unit a sliding operation, in response to the first sliding operation, determining whether the first display area is in the first preset area on the touch display unit, and finally, in the case of YES, maintaining the head area in the first preset area The second content area corresponding to the second content different from the first content is displayed in the second display area. The interface operation processing method, the device, the electronic device, and the storage medium display the head region in the preset region when the head region in the display interface is in the preset region, and display the content corresponding to the content different from the previous content. The area, so as to avoid the parameter being transmitted multiple times each time the content area is scrolled to achieve synchronization between the head area and the content area, causing the electronic device with poor performance to drop frames, and the scrolling in the display interface is not coordinated.

It should be noted that each embodiment in the specification is described in a progressive manner, and each embodiment focuses on differences from other embodiments, and the same similar parts between the embodiments are referred to each other. can. For the device type embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment.

In the several embodiments provided by the present application, it should be understood that the disclosed apparatus and method may also be implemented in other manners. The apparatus embodiments described above are merely illustrative, for example, the flowcharts and block diagrams in the figures illustrate the architecture, functionality, and functionality of possible implementations of apparatus, methods, and computer program products according to various embodiments of the present disclosure. operating. In this regard, each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings. For example, two consecutive blocks may be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts, can be implemented in a dedicated hardware-based system that performs the specified function or function. Or it can be implemented by a combination of dedicated hardware and computer instructions.

In addition, each functional module in various embodiments of the present disclosure may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.

The functions, if implemented in the form of software functional modules and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, the portion of the technical solution of the present disclosure that contributes in essence or to the prior art or the portion of the technical solution may be embodied in the form of a software product stored in a storage medium, including The instructions are used to cause a computer device (which may be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present disclosure. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like. . It should be noted that, in this context, relational terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply such entities or operations. There is any such actual relationship or order between them. Furthermore, the term "comprises" or "comprises" or "comprises" or any other variations thereof is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device that comprises a plurality of elements includes not only those elements but also Other elements, or elements that are inherent to such a process, method, item, or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.

The above description is only a preferred embodiment of the present disclosure, and is not intended to limit the disclosure, and various changes and modifications may be made to the present disclosure. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and scope of the present disclosure are intended to be included within the scope of the present disclosure. It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings.

The above is only the specific embodiment of the present disclosure, but the scope of the present disclosure is not limited thereto, and any person skilled in the art can easily think of changes or substitutions within the technical scope of the disclosure. It should be covered within the scope of protection of the present disclosure. Therefore, the scope of protection of the present disclosure should be determined by the scope of the claims.

Industrial applicability

The interface operation processing method, device, electronic device and storage medium provided by the present disclosure prevent the parameter area from being transmitted multiple times each time the content area is scrolled to realize synchronization between the head area and the content area, and the sliding is solved because there is no frequent data transmission. Unsynchronized issues improve display coordination.

Claims

An interface operation processing method is applied to an electronic device, and the method includes:

Displaying a first display interface on the touch display unit of the electronic device, wherein the touch display unit includes a first display area for displaying a head area on the first display interface, and for displaying a second display area of the first content area corresponding to the first content in the first display interface;

Obtaining a first sliding operation performed on the touch display unit;

Determining, in response to the first sliding operation, whether the first display area is in a first preset area on the touch display unit;

When YES, in the process of maintaining the display of the head region in the first preset area, displaying the second content corresponding to the second content different from the first content in the second display area region.
The method of claim 1, wherein determining whether the first display area is on the first preset area on the touch display unit, in response to the first sliding operation, comprises:

Determining, in response to the first sliding operation, whether a first sliding distance corresponding to the first sliding operation is greater than or equal to a difference between a third height and a fourth height of an actual display area in the first display interface, wherein a sum of a first height of the first display area and a second height of the second display area is the third height;

When yes, indicating that the first display area is on the first preset area on the touch display unit;

When it is no, it indicates that the first display area is not in the first preset area.
The method according to claim 1 or 2, wherein, in response to the first sliding operation, determining whether the first display area is after a first preset area on the touch display unit, the method Also includes:

In the case of NO, in the process of keeping the head region displayed in the second preset region, displaying a third content region corresponding to the third content different from the first content in the second display region, The area of the second preset area is larger than the area of the first preset area.
The method according to any one of claims 1 to 3, wherein, in response to the first sliding operation, determining whether the first display area is behind a first preset area on the touch display unit, The method further includes:

When it is no, determining whether a distance of an upper edge of the second display area from an upper edge of the first display interface is greater than a preset distance;

When YES, a fourth content area corresponding to the fourth content different from the first content is displayed in the second display area.
The method according to any one of claims 1 to 4, wherein in the process of maintaining the display of the head region in the first preset region, displaying and After the second content area corresponding to the second content different in the first content, the method further includes:

Determining whether the second content is the currently stored content for the bottom of the data source displayed in the second display area;

When YES, the load data is retrieved and stored in the data source.
The method according to any one of claims 1 to 5, wherein in the process of maintaining the display of the head region in the first preset area, displaying and After the second content area corresponding to the second content different in the first content, the method further includes:

Obtaining a second sliding operation performed on the touch display unit;

Determining, in response to the second sliding operation, whether the second content area is in a third preset area on the touch display unit;

When YES, the second content area is stored, and a fifth content area corresponding to the fifth content different from the second content is displayed in the second display area.
The method according to any one of claims 1 to 6, wherein displaying the first display interface on the touch display unit of the electronic device comprises:

The ScrollableTabView is nested in the ScrollView in the React Native list, and a custom header and a ScrollableTabView are placed in the ScrollView, where the header is the header area and the ScrollableTabView is the content area.
The method according to claim 7, wherein if the first display area is not in the first preset area on the touch display unit, the following settings are made:

The ScrollView is a state in which the scrolling is unlocked, and the ScrollableTabView is a state in which the scrolling is locked, and when the operation performed on the touch display unit is obtained, the entire ScrollView is scrolled.
The method according to claim 8, wherein if the first display area is in the first preset area on the touch display unit, the following settings are made:

The ScrollView locks the scroll, and the ScrollableTabView unlocks the scroll to make the head area fixed in the first preset area display, and realizes scrolling browsing of the content area.
The method according to any one of claims 7 to 9, wherein the method further comprises:

In the state of scrolling from the ScrollView, the ScrollableTabView is locked and scrolled, and the ScrollView is locked and scrolled. When the ScrollableTabView is unlocked, the ScrollableTabView is scrolled to the position of the ScrollableTabView in the initial display interface.
The method according to any one of claims 1 to 10, wherein the second display area comprises a plurality of content areas, the method further comprising: switching each of the content areas to be displayed by horizontal scrolling The second display area is described.
An interface operation processing method is applied to an electronic device, and the method includes:

Obtaining a first sliding operation on the touch display unit of the electronic device, the touch display unit is configured to display a first display interface, wherein the touch display unit comprises a first display for displaying a first display area of the head area on the interface, and a second display area for displaying a content area corresponding to the content in the first display interface;

Determining, in response to the first sliding operation, whether the first display area of the touch display unit is in a first preset area on the touch display unit;

If the first display area of the touch display unit is in the first preset area on the touch display unit, keep the head area displayed in the first preset area, and in the second The display area displays a content area corresponding to content different from the previous content.
An interface operation processing device is applied to an electronic device, wherein the device includes: an interface display module, a first operation acquisition module, a first operation response module, and a first execution module, wherein

The interface display module is configured to display a first display interface on the touch display unit of the electronic device, wherein the touch display unit includes a first portion configured to display a head region on the first display interface a display area, and a second display area configured to display a first content area corresponding to the first content in the first display interface;

The first operation acquiring module is configured to obtain a first sliding operation performed on the touch display unit;

The first operation response module is configured to determine, according to the first sliding operation, whether the first display area is in a first preset area on the touch display unit;

The first execution module is configured to maintain the display of the head region in the first preset area when the first display area is in the first preset area on the touch display unit And displaying, in the second display area, a second content area corresponding to the second content different from the first content.
The apparatus according to claim 13, wherein the first operation response module comprises a first determining unit and a determining executing unit, wherein

The first determining unit is configured to determine, according to the first sliding operation, whether the first sliding distance corresponding to the first sliding operation is greater than or equal to a third height and a first display area of the first display interface a difference of four heights, wherein a sum of a first height of the first display area and a second height of the second display area is the third height;

The determination execution unit is configured to determine that the first sliding distance corresponding to the first sliding operation is greater than or equal to a difference between the third height and a fourth height of the actual display area in the first display interface a first preset area of the display area on the touch display unit;

The determination execution unit is further configured to determine that the first sliding distance corresponding to the first sliding operation is not greater than or equal to a difference between the third height and a fourth height of the actual display area in the first display interface The first display area is not in the first preset area.
The device according to claim 13 or 14, wherein the device further comprises a second execution module, the second execution module being configured to be not on the touch display unit in the first display area In the first preset area, in the process of keeping the head area displayed in the second preset area, displaying the third content corresponding to the third content different from the first content in the second display area And an area, wherein an area of the second preset area is larger than an area of the first preset area.
The apparatus according to any one of claims 13 to 15, wherein the apparatus further comprises a third execution module and a fourth execution module, wherein the third execution module is configured to be in the first display area When it is not in the preset area on the touch display unit, determining whether the distance of the upper edge of the first content area from the upper edge of the first display interface is greater than a preset distance; the fourth execution module configuration Displaying, in the second display area, a fourth content different from the first content, when a distance from an upper edge of the first content area to an upper edge of the first display interface is greater than a preset distance The fourth content area.
The apparatus according to any one of claims 13 to 16, wherein the apparatus further comprises a fifth execution module and a sixth execution module, wherein the fifth execution module is configured to determine whether the second content is Configuring, for the current storage, content displayed at a bottom of the data source of the second display area; the sixth execution module configured to display the second content as currently stored for display on the second display When the content of the bottom of the data source of the region is acquired, the load data is acquired and stored in the data source.
The apparatus according to any one of claims 13 to 17, wherein the apparatus further comprises a second operation obtaining module, a second operation response module, and a seventh execution module, wherein the second operation obtaining module configuration Obtaining a second sliding operation performed on the touch display unit; the second operation response module is configured to determine whether the second content area is on the touch display unit in response to the second sliding operation a third preset area; the seventh execution module is configured to store the second content area when the second content area is in a third preset area on the touch display unit, and in the The second display area displays a fifth content area corresponding to the fifth content different from the second content.
An electronic device, comprising: a memory and a processor, the memory storing computer instructions that, when read and executed by the processor, cause the processor to perform The method of any of claims 1-12.
A storage medium, wherein the storage medium stores computer instructions, wherein the computer instructions, when read and executed, perform the method of any of claims 1-12.