List page display method and device

Abstract

The application discloses a list page display method and device, and relates to the technical field of computers.The method comprises the following steps: after detecting an event that a user scrolls a screen downwards, a first longitudinal offset of a scroll view control during scrolling is acquired; the longitudinal coordinates of a head view control and a list view control relative to the scroll view control and the content offset of the list view control are adjusted according to the first longitudinal offset, so that the positions of the head view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll; when it is determined that pull-to-refresh is needed according to the first longitudinal offset, the latest list content is acquired, and the latest list content is displayed in the list view control.Through the above steps, the display effect of refreshing in the middle part of the list page can be realized, the list page display effect is smooth, the interactive event processing is simple, and the user experience is good.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, and in particular to a list page display method and device. BACKGROUND

[0002] At present, the list page on the APP (application program) mostly adopts the top refreshing mode when being displayed, that is, the head of the list page and each row of list items in the list page are refreshed in turn from top to bottom. With the development of Internet technology, the existing list page refreshing mode is increasingly showing its limitations and is difficult to meet the increasing business requirements, such as the business requirement of refreshing the middle part of the list page.

[0003] In the process of implementing the present application, the inventor found that there is no solution to refreshing the middle part of the list page in the prior art. How to provide a solution to refreshing the middle part of the list page with smooth display effect, simple interactive event processing and good user experience is a problem to be solved urgently. SUMMARY

[0004] Therefore, the present application provides a list page display method and device, which can realize the display effect of refreshing the middle part of the list page, and the list page display effect is smooth, the interactive event processing is simple, and the user experience is good.

[0005] To achieve the above object, according to one aspect of the present application, a list page display method is provided.

[0006] In the list page display method of the present application, the list page is created based on a plurality of view controls, the plurality of view controls including a scroll view control, a head view control and a list view control; the head view control and the list view control are sub-views of the scroll view control and are arranged in the same view hierarchy from top to bottom; the method comprises: after detecting an event of a user scrolling the screen downward, obtaining a first longitudinal offset of the scroll view control when scrolling; adjusting the longitudinal coordinates of the head view control and the list view control relative to the scroll view control and the content offset of the list view control according to the first longitudinal offset, so that the positions of the head view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll; when it is determined according to the first longitudinal offset that a pull-down refresh is needed, obtaining the latest list content and displaying the latest list content in the list view control.

[0007] Optionally, the method further comprises: pre-setting the scroll attribute of the list view control as unavailable, and pre-setting the scroll attribute of the scroll view control as available.

[0008] Optionally, the step of adjusting the vertical coordinates of the header view control and the list view control relative to the scroll view control, and the content offset of the list view control according to the first vertical offset includes: updating the value of the vertical coordinate of the header view control relative to the scroll view control to the first vertical offset, updating the value of the vertical coordinate of the list view control relative to the scroll view control to the sum of the first vertical offset and the height of the header view control, and updating the value of the content offset of the list view control to the first vertical offset.

[0009] Optionally, the method further includes: comparing the absolute value of the first vertical offset with a preset threshold; if the absolute value of the first vertical offset is greater than or equal to the preset threshold, then it is determined that a pull-down refresh is required.

[0010] Optionally, the method further includes: after detecting an event of the user scrolling the screen upwards, obtaining a second vertical offset of the scroll view control during scrolling; adjusting the vertical coordinates of the header view control and the list view control relative to the scroll view control, as well as the content offset of the list view control, according to the second vertical offset, so that the header view control and the list view control do not scroll off the screen, and the content of the list view control scrolls along with the scroll view control.

[0011] Optionally, the step of adjusting the vertical coordinates of the header view control and the list view control, and the content offset of the list view control according to the second vertical offset includes: when the second vertical offset is less than the height of the cursor, keeping the value of the vertical coordinate of the header view control relative to the scroll view control unchanged, keeping the value of the vertical coordinate of the list view control relative to the scroll view control unchanged, and setting the value of the content offset of the list view control to zero; when the second vertical offset is greater than the height of the cursor, adjusting the vertical coordinates of the header view control and the list view control, and the content offset of the list view control according to the following formula:

[0012] y headerview =Offset scrollview +H suspended ;

[0013] y listview =Offset scrollview -(H headerview -H suspended );

[0014] Offset listview =Offset scrollview ;

[0015] wherein, y headerview is a vertical coordinate of the header view control relative to the scroll view control, Offset scrollview is a vertical offset of the scroll view control, H suspended is a ceiling height, y listview is a vertical coordinate of the list view control relative to the scroll view control, H headerview is a height of the header view control, Offset listview is a content offset of the list view control.

[0016] Optionally, the method further comprises: when the list content changes, determining a content size of the list view control according to the number of list items and the height of the list items, and adjusting a content size of the scroll view control according to the content size of the list view control and the height of the header view control.

[0017] To achieve the above object, according to another aspect of the present application, there is provided a list page display device.

[0018] In the list page display device of the present application, the list page is created based on a plurality of view controls, the plurality of view controls including a scroll view control, a header view control and a list view control; the header view control and the list view control are sub-views of the scroll view control, and are arranged in a same view hierarchy from top to bottom; the device comprises: an acquisition module, configured to acquire a first vertical offset of the scroll view control when scrolling after detecting an event of a user scrolling the screen downwards; an adjustment module, configured to adjust a vertical coordinate of the header view control and the list view control relative to the scroll view control, and a content offset of the list view control according to the first vertical offset, so that the positions of the header view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll; and a refreshing module, configured to acquire the latest list content and display the latest list content in the list view control when it is determined that a pull-to-refresh is needed according to the first vertical offset.

[0019] To achieve the above object, according to still another aspect of the present application, there is provided an electronic device.

[0020] The electronic device of the present application comprises: one or more processors; and a storage device configured to store one or more programs; when the one or more programs are executed by the one or more processors, the one or more processors implement the list page display method of the present application.

[0021] To achieve the above object, according to still another aspect of the present application, there is provided a computer readable medium.

[0022] The computer readable medium of the present application stores a computer program, which is executed by a processor to implement the list page display method of the present application.

[0023] The embodiment of the above application has the following advantages or beneficial effects: by creating a list page based on multiple view controls including a scroll view control, a header view control and a list view control, and making the header view control and the list view control as sub-views of the scroll view control, and setting a refresh animation view at the header of the list view control, and after detecting an event of a user scrolling down the screen, obtaining a first vertical offset of the scroll view control when scrolling, adjusting the vertical coordinates of the header view control and the list view control relative to the scroll view control and the content offset of the list view control according to the first vertical offset, so that the positions of the header view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll, when it is determined that a pull-down refresh is needed according to the first vertical offset, obtaining the latest list content and displaying the latest list content in the list view control, which can realize the display effect of refreshing in the middle part of the list page, and the list page display effect is smooth, the interactive event processing is simple, and the user experience is good.

[0024] The further effects of the above-mentioned non-conventional optional mode will be described in conjunction with the specific embodiments below. BRIEF DESCRIPTION OF DRAWINGS

[0025] The accompanying drawings are used to better understand the present application and do not constitute undue limitations on the present application. Among them:

[0026] Figure 1 is the main flow diagram of the list page display method according to the first embodiment of the present application;

[0027] Figure 2a is the position diagram of the view control in the initial state according to the embodiment of the present application;

[0028] Figure 2b is the position diagram of the view control when the user pulls down the screen according to the embodiment of the present application;

[0029] Figure 3 is the first part flow diagram of the list page display method according to the second embodiment of the present application;

[0030] Figure 4 is the second part flow diagram of the list page display method according to the second embodiment of the present application;

[0031] Figure 5is a schematic diagram of main modules of a list page display device according to a third embodiment of the present application;

[0032] Figure 6 is an exemplary system architecture diagram in which embodiments of the present application can be applied;

[0033] Figure 7 is a structural schematic diagram of a computer system of an electronic device suitable for implementing embodiments of the present application. DETAILED DESCRIPTION

[0034] Exemplary embodiments of the present application are described herein below with reference to the accompanying drawings, in which various details of embodiments of the present application are set forth to facilitate an understanding, and should be considered in a descriptive sense. It should be readily appreciated that modifications and variations of the embodiments described herein can be resorted to by those of ordinary skill in the art, without departing from the scope and spirit of the application. Likewise, it is to be noted that the specific

[0035] It should be noted that the embodiments of the present application and the features in the embodiments can be combined with each other without conflict.

[0036] Embodiment One

[0037] Figure 1 is a schematic diagram of the main flow of a list page display method according to a first embodiment of the present application. The method of the embodiment of the present application can be executed by a terminal device. As shown in Figure 1 the list page display method of the embodiment of the present application includes:

[0038] In step S101, after detecting an event of a user scrolling down a screen, a first vertical offset of a scroll view control when scrolling is acquired.

[0039] In the embodiment of the present application, the list page can be created based on a plurality of view controls, including a scroll view control, a header view control and a list view control; the header view control and the list view control are sub-views of the scroll view control and are arranged in the same view hierarchy from top to bottom.

[0040] Exemplarily, in an IOS system, the header view control can adopt a common UIView control, the list view control can adopt a UITableView control, and the scroll view control can adopt a UIScrollView control; in an Android system, the header view control can adopt an ImageView control or other display control; the list view control can adopt a ListView control, and the scroll view control can adopt a ScrollView control.

[0041] In the embodiment of the present application, the head view control and the list view control are mainly used to realize the display function, and the scroll view control is mainly used to realize the scroll function. Considering that both the list view control and the scroll view control have the scroll attribute, in order to avoid gesture conflict caused by the nesting of the two, the scroll attribute of the list view control is set to be unavailable in advance, and the scroll attribute of the scroll view control is set to be available in advance.

[0042] In this step, when the user scrolls the screen downward (or slides the screen), the first vertical offset of the control can be determined in real time by detecting the change of the touch point coordinate of the user on the screen.

[0043] In step S102, the vertical coordinates of the head view control and the list view control relative to the scroll view control and the content offset of the list view control are adjusted according to the first vertical offset, so that the positions of the head view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll.

[0044] In particular implementation, when the user scrolls the screen downward, the scroll view control is caused to scroll downward. If the scroll view control is regarded as a canvas, and the list view control and the head view control are regarded as two rectangular frames on the canvas, the two rectangular frames will move with the movement of the canvas. In order to achieve the visual effect that the positions of the head view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll, the vertical coordinates of the head view control and the list view control relative to the scroll view control and the content offset of the list view control need to be dynamically adjusted according to step S102.

[0045] In one example, step S102 specifically comprises: updating the value of the vertical coordinate of the head view control relative to the scroll view control to the first vertical offset, updating the value of the vertical coordinate of the list view control relative to the scroll view control to the sum of the first vertical offset and the height of the head view control, and updating the value of the content offset of the list view control to the first vertical offset.

[0046] In step S103, when it is determined that the pull-down refresh is needed according to the first vertical offset, the latest list content is obtained, and the latest list content is displayed in the list view control.

[0047] For example, when it is determined that the pull-down refresh is needed, the latest list content can be requested from the server through an interface, and then the latest list content returned by the server is displayed in the list view control.

[0048] Further, the list view control in the embodiment of the present application is further provided with a refreshing view (which can be referred to as a refreshing header for short) at the header thereof. In a specific implementation, the refreshing header is displayed when the user scrolls down the screen by means of the Boundces attribute (an attribute similar to a spring effect) of the list view control, and the list view control slides up when the user releases the finger, thereby hiding the refreshing header.

[0049] In the embodiment of the present application, the list page is created based on the multiple view controls including the scroll view control, the header view control and the list view control, the header view control and the list view control are set as the sub-views of the scroll view control, the refreshing animation view is set at the header of the list view control, and the interactive event processing logic of steps S101 to S103, so that the display effect of refreshing in the middle part of the list page is realized, the list page display effect is smooth, the interactive event processing is simple, and the user experience is good.

[0050] Figure 2a is a position schematic diagram of the view control according to the embodiment of the present application in an initial state; Figure 2b is a position schematic diagram of the view control according to the embodiment of the present application when the user scrolls down the screen.

[0051] As shown in Figure 2a and Figure 2b , the multiple view controls based on the list page of the embodiment of the present application include a scroll view control 201, a list view control 202 and a header view control 203. The list view control 202 and the header view control 203 are set as the sub-views of the scroll view control 201 and are arranged in the same view level from top to bottom.

[0052] Exemplarily, in the Android system, the scroll view control 201 can adopt the ScrollView control, the list view control 202 can adopt the ListView control, and the header view control can adopt a common display control such as the ImageView control and the like. Further, considering that the ListView control and the ScrollView control both have the scrolling attribute, gesture conflicts are easily caused. Therefore, in order to avoid the gesture conflicts, the scrolling attribute of the ListView control can be disabled, and the scrolling attribute of the ScrollView control can be set as available. Moreover, in order to realize the pull-down refreshing effect, the refreshing view can be set as the sub-view of the list view control.

[0053] As shown in Figure 2aAs shown in the initial state, the head view control 203 can be aligned with the left top vertex of the scroll view control 201, and the list view control 202 can be laid out below the head view control 203 and next to the head view control. Assuming that the height of the head view control is 30 pixels, the initial coordinates of the head view control 203 relative to the scroll view control 201 are (0, 0), and the initial coordinates of the list view control 202 relative to the scroll view control 201 are (0, 30). Thus, in the initial state, the vertical coordinate of the head view control relative to the scroll view control 201 is 0, and the vertical coordinate of the list view control relative to the scroll view control 201 is 30.

[0054] As shown in the initial state, the head view control 203 can be aligned with the left top vertex of the scroll view control 201, and the list view control 202 can be laid out below the head view control 203 and next to the head view control. Assuming that the height of the head view control is 30 pixels, the initial coordinates of the head view control 203 relative to the scroll view control 201 are (0, 0), and the initial coordinates of the list view control 202 relative to the scroll view control 201 are (0, 30). Thus, in the initial state, the vertical coordinate of the head view control relative to the scroll view control 201 is 0, and the vertical coordinate of the list view control relative to the scroll view control 201 is 30. Figure 2b As shown in the initial state, the head view control 203 can be aligned with the left top vertex of the scroll view control 201, and the list view control 202 can be laid out below the head view control 203 and next to the head view control. Assuming that the height of the head view control is 30 pixels, the initial coordinates of the head view control 203 relative to the scroll view control 201 are (0, 0), and the initial coordinates of the list view control 202 relative to the scroll view control 201 are (0, 30). Thus, in the initial state, the vertical coordinate of the head view control relative to the scroll view control 201 is 0, and the vertical coordinate of the list view control relative to the scroll view control 201 is 30.

[0055] Embodiment Two

[0056] The list page display method of the embodiment of the present application will be described below in combination with Figure 3 and Figure 4 The list page display method of the embodiment of the present application will be described below in combination with

[0057] Figure 3 is a first part flow diagram of the list page display method according to the second embodiment of the present application. As shown in the diagram, the list page display method of the embodiment of the present application comprises: Figure 3

[0058] In step S301, after detecting the event of the user scrolling the screen downward, the first vertical offset of the scroll view control during scrolling is acquired.

[0059] In the embodiment of the present application, the list page can be created based on a plurality of view controls, which include a scroll view control, a head view control and a list view control; the head view control and the list view control are sub-views of the scroll view control and are arranged in the same view level from top to bottom.

[0060] ​Exemplarily, in the IOS system, the head view control can adopt a common UIView control, the list view control can adopt a UITableView control, and the scroll view control can adopt a UIScrollView control; in the Android system, the head view control can adopt an ImageView control or the like display control, the list view control can adopt a ListView control, and the scroll view control can adopt a ScrollView control.

[0061] In the embodiment of the present application, the head view control and the list view control are mainly used to realize display functions, and the scroll view control is mainly used to realize a scroll function. Considering that both the list view control and the scroll view control have a scroll attribute, in order to avoid gesture conflicts caused by nesting, the scroll attribute of the list view control can be preset to be unavailable, and the scroll attribute of the scroll view control can be preset to be available.

[0062] In this step, when the user scrolls the screen downward (or slides the screen), the first vertical offset of the control can be determined in real time by detecting the change of the touch point coordinates of the user on the screen. Generally, when the user scrolls the screen downward, the vertical offset (i.e., the first vertical offset) of the scroll view control is less than 0. For example, assuming that the user scrolls the screen downward by a scroll distance of 30 pixels, the vertical offset (i.e., the first vertical offset) of the scroll view control is -30 pixels.

[0063] In step S302, the vertical coordinates of the head view control and the list view control relative to the scroll view control and the content offset of the list view control are adjusted according to the first vertical offset, so that the positions of the head view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll.

[0064] In particular implementation, when the user scrolls the screen downward, the scroll view control is caused to scroll downward. If the scroll view control is regarded as a canvas, and the list view control and the head view control are regarded as two rectangular frames on the canvas, the two rectangular frames will move with the movement of the canvas. In order to achieve the visual effect that the positions of the head view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll, the vertical coordinates of the head view control and the list view control relative to the scroll view control and the content offset of the list view control need to be dynamically adjusted according to step S102.

[0065] In one example, step S302 specifically comprises: updating a value of a longitudinal coordinate of the header view control relative to the scroll view control to the first longitudinal offset, updating a value of a longitudinal coordinate of the list view control relative to the scroll view control to a sum of the first longitudinal offset and a height of the header view control, and updating a value of a content offset of the list view control to the first longitudinal offset.

[0066] Step S303 comprises comparing an absolute value of the first longitudinal offset with a preset threshold.

[0067] If the absolute value of the first longitudinal offset is greater than or equal to the preset threshold, step S304 is performed; if the absolute value of the first longitudinal offset is less than the preset threshold, step S305 is performed.

[0068] For example, assuming that the preset threshold is 40 pixels, if the absolute value of the first longitudinal offset of the scroll view control is greater than or equal to 40 pixels, it is determined that the pull-to-refresh needs to be performed when the user releases the finger, and then step S304 is performed; if the absolute value of the first longitudinal offset of the scroll view control is less than 40 pixels, it is determined that the pull-to-refresh does not need to be performed.

[0069] Step S304 comprises obtaining the latest list content and displaying the latest list content in the list view control.

[0070] For example, when it is determined that the pull-to-refresh needs to be performed, the latest list content can be requested from a server through an interface, and then the latest list content returned by the server is displayed in the list view control.

[0071] Further, the list view control in the embodiment of the present application is also provided with a refresh view (which can be referred to as a "refresh header") at the head thereof. In a specific implementation, the Boundces attribute (an attribute similar to a spring effect) of the list view control is used to display the refresh header when the user scrolls down the screen, and the list view control slides up when the user releases the finger to hide the refresh header.

[0072] Step S305 comprises determining that the pull-to-refresh is not performed.

[0073] Further, after it is determined that the pull-to-refresh does not need to be performed, the list view control can be bounced back through the Boundces attribute of the list view control, so as to hide the refresh header.

[0074] In the embodiment of the present application, by utilizing the nesting of the scroll view control, the list view control and the head view control, by disabling the scroll attribute of the list view control, and by the interaction event processing of steps S301 to S305, the display effect of refreshing in the middle part of the list page can be realized, the user experience is good, and the list page display effect is smooth, the interaction event processing is simple, and the expansibility is good.

[0075] Figure 4 is a second partial flow diagram of the list page display method according to the second embodiment of the present application. As shown in Figure 4 the list page display method of the embodiment of the present application further comprises:

[0076] Step S401, after detecting the event of the user scrolling the screen upwards, acquiring the second vertical offset of the scroll view control when scrolling.

[0077] In this step, when the user scrolls the screen upwards (or slides the screen), the second vertical offset of the control can be determined in real time by detecting the change of the touch point coordinates of the user on the screen. Generally, when the user scrolls the screen upwards, the vertical offset (i.e. the second vertical offset) of the scroll view control is greater than 0. For example, assuming that the user scrolls the screen upwards by a distance of 10 pixels, the vertical offset (i.e. the second vertical offset) of the scroll view control is 10 pixels.

[0078] Step S402, adjusting the vertical coordinates of the head view control and the list view control relative to the scroll view control and the content offset of the list view control according to the second vertical offset, so that the head view control and the list view control do not roll out of the screen, and the content of the list view control follows the scroll view control to roll.

[0079] In one example, step S402 specifically comprises steps a1 and a2.

[0080] Step a1, when the second vertical offset is less than the ceiling height, keeping the value of the vertical coordinate of the head view control relative to the scroll view control unchanged, keeping the value of the vertical coordinate of the list view control relative to the scroll view control unchanged, and setting the value of the content offset of the list view control to zero.

[0081] The ceiling height can be understood as the height of the top of the head view control from the top of the screen in the ceiling state. The ceiling state, i.e. the head view control remains stationary when it is close to the top of the screen.

[0082] In the embodiment of the present application, the step a1 can realize the visual effect that the head view control and the list view control move upward together with the scroll view control. Further, when the second longitudinal offset is less than the ceiling height, the transparency of the picture or text displayed by the head view control can be changed to improve the visual experience of the user.

[0083] The step a2, when the second longitudinal offset is greater than the ceiling height, adjusts the longitudinal coordinates of the head view control and the list view control and the content offset of the list view control according to the following formula:

[0084] y headerview = Offset scrollview + H suspended ;

[0085] y listview = Offset scrollview - (H headerview - H suspended ) ;

[0086] Offset listview = Offset scrollview ;

[0087] Wherein, y headerview is the longitudinal coordinate of the head view control relative to the scroll view control, Offset scrollview is the longitudinal offset of the scroll view control, H suspended is the ceiling height, y listview is the longitudinal coordinate of the list view control relative to the scroll view control, H headerview is the height of the head view control, and Offset listview is the content offset of the list view control.

[0088] In the embodiment of the present application, the step a2 can realize the visual effect that the position of the head view control and the list view control relative to the screen does not change, and the list content in the list view control moves upward together with the scroll view control, and further, the user has the visual feeling that the list view control is scrolled.

[0089] Further, considering that the list view control cannot be scrolled, but the content size (ContentSize) of the list view control will change with the change of the list content (or the data source of the list view control), the method of the embodiment of the present application can further include the following step: S403, when the list content changes, determining the content size of the list view control according to the number of list items and the height of the list items, and adjusting the content size (ContenSize) of the scroll view control according to the content size of the list view control and the height of the head view control.

[0090] For example, after requesting the list content through the interface, the number of list items in the ListView control and the height of each list item (Item) can be obtained when the list content is parsed to calculate the content size of the list view control, and then the content size of the ScrollView control is calculated. For example, assuming that the changed list content needs 5 list items to display, and the height of each list item is 10 pixels, the content size of the list view control is 50 pixels, and further assuming that the height of the head view control is 10 pixels, the content size of the scroll view control is 60 pixels.

[0091] In addition, the content size of the list view control can also be directly obtained through the attribute of the list view control after listening to the event of the change of the content size of the list view control. However, due to the reuse characteristics and lazy loading mode of the list view control, the accuracy of the content size of the list view control determined by this method is insufficient. In the embodiment of the present application, the content size of the list view control is calculated through step S403, which is more accurate than directly obtaining the content size of the list view control through the attribute of the list view control, and thus the accuracy of adjusting the content size of the scroll view control is improved.

[0092] In the embodiment of the present application, through the user interaction event processing of steps S401 to S402, the visual effect that the head view control and the list view control do not roll out of the screen when scrolling up the screen, and the content of the list view control follows the scroll view control to scroll, can be realized, and the list page display effect is smooth, the interaction event processing is simple, and the user experience is good.

[0093] Figure 5 is a schematic diagram of main modules of a list page display device according to the third embodiment of the present application. As shown in Figure 5 the list page display device 500 of the embodiment of the present application includes an obtaining module 501, an adjusting module 502, and a refreshing module 503.

[0094] The obtaining module 501 is configured to obtain a first longitudinal offset of the scroll view control when scrolling after detecting an event of scrolling down the screen by the user. Specifically, when the user scrolls down the screen (or slides the screen), the obtaining module 501 can determine the first longitudinal offset of the control in real time by detecting the change of the touch point coordinate of the user on the screen.

[0095] In the embodiment of the present application, the list page can be created based on a plurality of view controls, including a scroll view control, a head view control and a list view control; the head view control and the list view control are sub-views of the scroll view control, and are arranged in the same view hierarchy from top to bottom.

[0096] Exemplarily, in the IOS system, the head view control can adopt a common UIView control, the list view control can adopt a UITableView control, and the scroll view control can adopt a UIScrollView control; in the Android system, the head view control can adopt an ImageView control or the like display control, the list view control can adopt a ListView control, and the scroll view control can adopt a ScrollView control.

[0097] In the embodiment of the application, the head view control and the list view control are mainly used to realize display functions, and the scroll view control is mainly used to realize a scrolling function. Considering that both the list view control and the scroll view control have a scrolling attribute, in order to avoid gesture conflicts caused by nesting, the scrolling attribute of the list view control can be preset to be unavailable, and the scrolling attribute of the scroll view control can be preset to be available.

[0098] The adjusting module 502 is configured to adjust, according to the first longitudinal offset, a longitudinal coordinate of the head view control and the list view control relative to the scroll view control and a content offset of the list view control, so that the head view control and the list view control have a constant position on the screen, and the content of the list view control follows the scroll view control to scroll.

[0099] In specific implementation, when a user scrolls the screen downward, the scroll view control is caused to scroll downward. If the scroll view control is regarded as a canvas, and the list view control and the head view control are regarded as two rectangular frames on the canvas, the two rectangular frames move with the movement of the canvas. In order to achieve the visual effect that the head view control and the list view control have a constant position on the screen, and the content of the list view control follows the scroll view control to scroll, the longitudinal coordinate of the head view control and the list view control relative to the scroll view control and the content offset of the list view control need to be dynamically adjusted according to step S102.

[0100] In one example, the adjusting module 502 adjusts, according to the first longitudinal offset, a longitudinal coordinate of the head view control and the list view control relative to the scroll view control and a content offset of the list view control specifically includes that the adjusting module 502 updates a value of the longitudinal coordinate of the head view control relative to the scroll view control to the first longitudinal offset, the adjusting module 502 updates a value of the longitudinal coordinate of the list view control relative to the scroll view control to a sum of the first longitudinal offset and a height of the head view control, and the adjusting module 502 updates a value of the content offset of the list view control to the first longitudinal offset.

[0101] The refreshing module 503 is configured to, when it is determined that the pull-down refreshing is needed according to the first longitudinal offset, acquire the latest list content and display the latest list content in the list view control.

[0102] For example, when it is determined that the pull-down refreshing is needed, the refreshing module 503 can request the latest list content from the server through an interface, and then display the latest list content returned by the server in the list view control.

[0103] Further, the list view control in the embodiment of the present application is also provided with a refreshing view (which can be referred to as a "refreshing head" for short) at the head thereof. In a specific implementation, the refreshing head is displayed when the user scrolls down the screen, and the refreshing head is hidden when the list view control slides up when the user releases the finger, through the Boundces attribute (a kind of attribute similar to spring effect) of the list view control.

[0104] In the embodiment of the present application, the list page is created based on a plurality of view controls including a scroll view control, a head view control and a list view control, the head view control and the list view control are used as the sub-views of the scroll view control, the refreshing animation view is arranged at the head of the list view control, and the interactive event processing logic of the list page display device of the embodiment of the present application can realize the display effect of refreshing in the middle part of the list page, and the list page display effect is smooth, the interactive event processing is simple, and the user experience is good.

[0105] Figure 6 An exemplary system architecture 600 to which the list page display method or the list page display device of the embodiment of the present application can be applied is shown.

[0106] As shown in Figure 6 The system architecture 600 can include terminal devices 601, 602, 603, a network 604 and a server 605. The network 604 is used to provide a communication link medium between the terminal devices 601, 602, 603 and the server 605. The network 604 can include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0107] The user can use the terminal devices 601, 602, 603 to interact with the server 605 through the network 604 to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 601, 602, 603, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0108] The terminal devices 601, 602, and 603 can be various electronic devices with display screens and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, desktop computers, and the like.

[0109] The server 605 can be a server providing various services, such as a background management server providing support for a shopping website browsed by a user using the terminal device 601, 602, or 603. The background management server can analyze and process received list content refreshing requests and the like, and feed back the processing result (e.g., the latest list content) to the terminal device.

[0110] It should be noted that the list page display method provided by the embodiments of the present application is generally executed by a terminal device, and correspondingly, the list page display apparatus is generally arranged in a terminal device.

[0111] It should be understood that, Figure 6 The number of terminal devices, networks, and servers in the system is merely illustrative. Any number of terminal devices, networks, and servers can be provided according to implementation needs.

[0112] Reference is made below to Figure 7 which shows a structural schematic diagram of a computer system 700 of a terminal device suitable for implementing the embodiments of the present application. Figure 7 The computer system shown is merely an example, and should not bring any limitation to the functions and use range of the embodiments of the present application.

[0113] As shown in Figure 7 , the computer system 700 includes a central processing unit (CPU) 701, which can perform various appropriate actions and processes according to programs stored in a read-only memory (ROM) 702 or programs loaded from a storage portion 708 into a random access memory (RAM) 703. Various programs and data required for the operation of the system 700 are also stored in the RAM 703. The CPU 701, the ROM 702, and the RAM 703 are connected to each other through a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0114] The following components are connected to the I / O interface 705: an input part 706 including a keyboard, a mouse, etc.; an output part 707 including a display such as a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage part 708 including a hard disk, etc.; and a communication part 709 including a network interface card such as a LAN card, a modem, etc. The communication part 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as necessary. A removable medium 711 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc. is attached to the drive 710 as necessary, so that a computer program read out therefrom is installed in the storage part 708 as necessary.

[0115] In particular, the processes described above with reference to the flowcharts can be implemented as a computer software program according to embodiments of the present disclosure. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for executing the methods illustrated by the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network by the communication part 709, and / or installed from the removable medium 711. When the computer program is executed by the central processing unit (CPU) 701, the above-described functions defined in the system of the present disclosure are executed.

[0116] It should be noted that the computer-readable medium shown in the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or component, or any combination of the above. More specific examples of computer-readable storage media can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, the 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, device or component. In the present application, the computer-readable signal medium can include a data signal carried in a baseband or as a part of a carrier wave, which carries computer-readable program code. Such a propagated data signal can take various forms, including but not limited to an electromagnetic signal, an optical signal or any suitable combination of the above. The computer-readable signal medium can also be any computer-readable medium other than the computer-readable storage medium, which can send, propagate or transmit a program for use by or in conjunction with an instruction execution system, device or component. The program code contained on the computer-readable medium can be transmitted by any suitable medium, including but not limited to wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0117] The flowcharts and block diagrams in the drawings illustrate the possible implementation architectures, functions and operations of the systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowcharts or block diagrams can represent a module, a program segment or a part of code containing one or more executable instructions for implementing the specified logical functions. It should also be noted that in some alternative implementations, the functions noted in the blocks can occur in different order than that shown in the drawings. For example, two blocks that are shown in succession can actually be executed substantially in parallel, and sometimes in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams or flowcharts, and the combination of blocks in the block diagrams or flowcharts, can be implemented by a dedicated hardware-based system that performs the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0118] The modules described in the embodiments of the present application can be implemented in the form of software, or can be implemented in the form of hardware. The modules described can also be arranged in a processor, for example, a processor can be described as comprising an acquisition module, an adjustment module, and a refreshing module. In some cases, the names of the modules do not constitute a limitation on the modules themselves, for example, the acquisition module can also be described as a "module for acquiring a first vertical offset of a scroll view control when scrolling".

[0119] As another aspect, the present application also provides a computer readable medium, which can be included in the device described in the above embodiments, or can exist independently without being assembled into the device. The computer readable medium carries one or more programs, which, when executed by the device, cause the device to perform the following processes: after detecting an event of a user scrolling down a screen, acquiring a first vertical offset of a scroll view control when scrolling; adjusting a vertical coordinate of a header view control and a list view control relative to the scroll view control and a content offset of the list view control according to the first vertical offset, so that the positions of the header view control and the list view control on the screen remain unchanged, and the content of the list view control follows the scroll view control to scroll; when it is determined that a pull-to-refresh is needed according to the first vertical offset, acquiring the latest list content, and displaying the latest list content in the list view control.

[0120] The specific embodiments described above do not constitute a limitation on the protection scope of the present application. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principles of the present application should be included in the protection scope of the present application.

Claims

1. A method for displaying a list page, characterized in that, The list page is created based on multiple view controls, including a scroll view control, a header view control, and a list view control. The header view control and the list view control are subviews of the scroll view control, and are set sequentially from top to bottom at the same view level. The header view control and the list view control are used to implement display functionality, and the scroll view control is used to implement scrolling functionality. Both the list view control and the scroll view control have scrolling properties. The method includes: The scroll property of the list view control is set to disabled beforehand, and the scroll property of the scroll view control is set to enabled beforehand. After detecting an event that the user scrolls down the screen, obtain the first vertical offset of the scroll view control during scrolling; The vertical coordinates of the header view control and the list view control relative to the scroll view control, as well as the content offset of the list view control, are adjusted according to the first vertical offset to keep the positions of the header view control and the list view control on the screen unchanged, and to make the content of the list view control scroll together with the scroll view control. When it is determined that a pull-to-refresh is needed based on the first vertical offset, the latest list content is obtained and displayed in the list view control.

2. The method according to claim 1, characterized in that, The step of adjusting the vertical coordinates of the header view control and the list view control relative to the scroll view control, and the content offset of the list view control according to the first vertical offset, includes: The vertical coordinate of the header view control relative to the scroll view control is updated to the first vertical offset. The vertical coordinate of the list view control relative to the scroll view control is updated to the sum of the first vertical offset and the height of the header view control. The content offset of the list view control is updated to the first vertical offset.

3. The method according to claim 1, characterized in that, The method further includes: The absolute value of the first vertical offset is compared with a preset threshold; if the absolute value of the first vertical offset is greater than or equal to the preset threshold, it is determined that a pull-to-refresh is required.

4. The method according to claim 1, characterized in that, The method further includes: After detecting an event of the user scrolling the screen upwards, the second vertical offset of the scroll view control during scrolling is obtained; the vertical coordinates of the header view control and the list view control relative to the scroll view control, as well as the content offset of the list view control, are adjusted according to the second vertical offset to ensure that the header view control and the list view control do not scroll off the screen, and that the content of the list view control scrolls along with the scroll view control.

5. The method according to claim 4, characterized in that, The steps of adjusting the vertical coordinates of the header view control and the list view control, and the content offset of the list view control according to the second vertical offset, include: When the second vertical offset is less than the ceiling height, the value of the vertical coordinate of the header view control relative to the scroll view control remains unchanged, the value of the vertical coordinate of the list view control relative to the scroll view control remains unchanged, and the value of the content offset of the list view control is set to zero. When the second vertical offset is greater than the ceiling height, adjust the vertical coordinates of the header view control and the list view control, as well as the content offset of the list view control, according to the following formula: y headerview =Offset scrollview +H suspended ; y listview =Offset scrollview -(H headerview -H suspended ); Offset listview =Offset scrollview ; Among them, y headerview Offset is the vertical coordinate of the header view control relative to the scroll view control. scrollview H represents the vertical offset of the scroll view control. suspended For ceiling height, y listview H represents the vertical coordinate of the list view control relative to the scroll view control. headerview The height of the header view control, Offset listview This is the content offset of the list view control.

6. The method according to claim 1, characterized in that, The method further includes: When the list content changes, the content size of the list view control is determined based on the number of list items and the height of the list items, and the content size of the scroll view control is adjusted based on the content size of the list view control and the height of the header view control.

7. A list page display device, characterized in that, The list page is created based on multiple view controls, including a scroll view control, a header view control, and a list view control. The header view control and the list view control are subviews of the scroll view control, and are arranged sequentially from top to bottom at the same view level. The header view control and the list view control are used to implement display functionality, and the scroll view control is used to implement scrolling functionality. Both the list view control and the scroll view control have scrolling properties. The device includes: The acquisition module is used to pre-set the scroll property of the list view control to be disabled and pre-set the scroll property of the scroll view control to be enabled; after detecting an event that the user scrolls down the screen, it acquires the first vertical offset of the scroll view control during scrolling; The adjustment module is used to adjust the vertical coordinates of the header view control and the list view control relative to the scroll view control, as well as the content offset of the list view control, according to the first vertical offset, so that the positions of the header view control and the list view control on the screen remain unchanged, and the content of the list view control scrolls together with the scroll view control. The refresh module is used to obtain the latest list content and display the latest list content in the list view control when it is determined that a pull-down refresh is needed based on the first vertical offset.

8. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1 to 6.

9. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1 to 6.

Images