WO2022257973A1 - 页面显示方法及装置、设备、存储介质 - Google Patents

页面显示方法及装置、设备、存储介质 Download PDF

Info

Publication number
WO2022257973A1
WO2022257973A1 PCT/CN2022/097639 CN2022097639W WO2022257973A1 WO 2022257973 A1 WO2022257973 A1 WO 2022257973A1 CN 2022097639 W CN2022097639 W CN 2022097639W WO 2022257973 A1 WO2022257973 A1 WO 2022257973A1
Authority
WO
WIPO (PCT)
Prior art keywords
height
cell
page
display
list
Prior art date
Application number
PCT/CN2022/097639
Other languages
English (en)
French (fr)
Inventor
刘婉玲
张婷婷
王超
Original Assignee
北京沃东天骏信息技术有限公司
北京京东世纪贸易有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京沃东天骏信息技术有限公司, 北京京东世纪贸易有限公司 filed Critical 北京沃东天骏信息技术有限公司
Publication of WO2022257973A1 publication Critical patent/WO2022257973A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G06Q30/0601—Electronic shopping [e-shopping]
    • G06Q30/0641—Shopping interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation

Definitions

  • the present application relates to the field of computer technology, and relates to but not limited to a page display method, device, device, and storage medium.
  • an embodiment of the present application provides a method for displaying a page, the method including:
  • the list to be displayed is a list in the page
  • an embodiment of the present application provides a page display device, including:
  • the first determination unit is configured to determine the height range of the display area of the display interface in the list to be displayed based on the scrolling amount of the page; the list to be displayed is a list in the page;
  • obtaining a unit configured to obtain the height of each of the cells in at least one cell in the list to be displayed
  • the second determination unit is used to determine the visible cells located in the display area according to the height of the cells in the list to be displayed and the height range;
  • a display unit is used to display the content of the visible cell.
  • the embodiment of the present application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and operable on the processor, and the above-mentioned page display method is realized when the processor runs the computer program in the steps.
  • the embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps in the above page display method are realized.
  • FIG. 1 is a schematic diagram of an optional architecture of a page display system in an embodiment of the present application
  • FIG. 2 is a schematic diagram of an optional architecture of a page display system in an embodiment of the present application
  • FIG. 3 is a schematic flowchart of an optional page display method provided by the embodiment of the present application.
  • FIG. 4 is a schematic diagram of an optional effect of page display provided by the embodiment of the present application.
  • Fig. 5 is a schematic diagram of an optional effect of the list display provided by the embodiment of the present application.
  • FIG. 6 is a schematic diagram of an optional effect of the list display provided by the embodiment of the present application.
  • FIG. 7 is a schematic diagram of an optional effect of the list display provided by the embodiment of the present application.
  • FIG. 8 is an optional structural schematic diagram of a page display device provided by an embodiment of the present application.
  • FIG. 9 is a schematic structural diagram of an optional electronic device provided by an embodiment of the present application.
  • Embodiments of the present application may provide a page display method, device, and storage medium.
  • the page display method can be implemented by a page display device, and each functional entity in the page display device can be composed of hardware resources of an electronic device (such as a terminal device or a server), such as computing resources such as a processor, communication resources (such as for supporting Realize communication in various ways such as optical cable, cellular, etc.) Collaborative realization.
  • an electronic device such as a terminal device or a server
  • computing resources such as a processor
  • communication resources such as for supporting Realize communication in various ways such as optical cable, cellular, etc.
  • the page display method of the embodiment of the present application can be applied to the page display system shown in FIG. 1, as shown in FIG. Interact with the user based on the input device, receive the access request input by the user, and display the page corresponding to the access request on the application program based on the user's access request.
  • the client 10 may also receive a scrolling operation of the page based on the input device, so as to update the display area of the page on the display interface.
  • the input device includes: a display, a mouse, a keyboard, and other devices capable of receiving user operations.
  • the page displayed on the display interface of the client 10 includes a list 101, and there are multiple cells 102 in the list 101.
  • the cells displayed on the display interface are referred to as visible cells.
  • the page display system further includes a server 20, and the server 20 can communicate with the client 10 through the network 30.
  • the client 10 may forward the access request to the server 20, so as to request the server 20 for the data of the visited page.
  • the client 10 determines the height range of the display area of the display interface in the list to be displayed based on the scrolling amount of the page; the list to be displayed is a list on the page; and at least The height of each cell in a cell; according to the height of each cell and the height range, determine at least one visible cell located in the display area; display the content of the visible cell, The content of each cell in the current display area of the page is rendered in the display interface.
  • this embodiment proposes a page display method, which can know the cells in the current list that need to be displayed in the display interface without relying on the API provided by the native system.
  • This embodiment provides a page display method.
  • the functions realized by the method can be realized by calling the program codes by the processor in the electronic device, and of course the program codes can be stored in the computer storage medium.
  • the electronic device at least includes a processor and a storage medium.
  • Fig. 3 is a schematic diagram of the implementation flow of a page display method according to an embodiment of the present application. As shown in Fig. 3, the method may include the following steps:
  • the client determines the height range of the display area located on the display interface in the list to be displayed.
  • the list to be displayed is a list on the page.
  • the client can obtain the scrolling amount of the page.
  • the page may acquire a page scrolling amount based on a page scrolling stop method. For example: based on the method onMomentumScrollEnd called after a page is scrolled, or the method onScrollEndDrag triggered when a page is scrolled and dragged, the scrolling amount of the page is obtained.
  • the scrolling amount of the page is the displacement of the current display area of the page relative to the initial page when the page is loaded for the first time.
  • the scrolling amount of the page is zero.
  • the current page is not initially loaded but after receiving the user’s scrolling operation, the scrolling amount is the sum of the scrolling amount of each scrolling operation in at least one scrolling operation of the page, wherein, the scroll amount itself has a direction, and when scrolling from top to bottom, the direction is positive, and when scrolling from bottom to top, the direction is negative.
  • the size of the page can be adjusted to keep the width of the page consistent with the width of the display interface, and the height of the page is greater than the height of the display interface.
  • the display interface of the client When displaying, only a partial area of the page is displayed in the display interface each time.
  • an area 401 is displayed on the display interface.
  • the area 403 shown in (2) in 4 when the area 403 receives a scroll operation whose scrolling direction is the direction 404, the area 405 shown in (3) in FIG. 4 is displayed on the display interface.
  • the area shown by the virtual part in the page is an invisible area not displayed on the display interface, and the area shown by the solid line part in the page is a visible area displayed on the display interface.
  • the client After the client obtains the scrolling amount of the page, it determines the height range of the display area according to the scrolling amount of the page.
  • the display area is the area in the display interface of the list to be displayed.
  • the height range of the display area represents the area where the list to be displayed needs to be displayed. Displays the size of the area in the interface.
  • the height range of the display area located on the display interface 502 in the list 501 is [H1, H2]. In the display interface 502 .
  • the list to be displayed is any list on the page.
  • the list may include multiple cells, and different cells are used to display different contents.
  • different cells are used to display different products.
  • different cells are used to display different videos.
  • the list to be displayed is also scrolled when the page is scrolled.
  • the scrolling amount of the current page is determined based on the scrolling operation, and the height range of the current display area is determined based on the scrolling amount.
  • the client acquires the height of each cell in at least one cell included in the to-be-displayed list.
  • the client after the client receives the page data from the server, it determines the height of each cell in the list to be displayed.
  • the data received by the client from the server carries the height of each cell.
  • the data received by the client from the server does not carry the height of each cell, at this time, the client may add the height of each cell to the received data.
  • the client determines at least one visible cell located in the display area according to the height of each cell and the height range.
  • the client determines the height of each cell in the list to be displayed, and determines the height of each cell in the list to be displayed according to the rendering order of the cells, and according to the height and height range of each cell in the list to be displayed, Determine whether each cell is located in the display area. If the height of a cell in the display list is within the height range, it indicates that the cell is located in the display area. It is a visible cell visible to the user through the display interface. If a cell is in the waiting list If the height in the display list is not within the height range, it means that the cell is not in the display area, and it is not a visible cell visible to the user through the display interface, but a cell invisible to the user.
  • the heights of cell 5011, cell 5012, cell 5013, cell 5014, cell 5015 and cell 5016 in the list to be displayed are not in the height range [H1, H2], cell 5017, cell If the heights of cell 5018, cell 5019 and cell 5010 in the list to be displayed are within the height range [H1, H2], the visible cells include: cell 5017, cell 5018, cell 5019 and cell 5010.
  • the client displays the content of the visible cell.
  • the client After the client determines the visible cells, it renders the visible cells according to the rendering order of the visible cells, so that the visible cells in the list to be displayed are displayed on the display interface.
  • the system used by the page can be various development systems, such as: PhoneGap, an application development platform based on HyperText Markup Language (HTML) and JavaScript, and React Native, a hybrid mobile application development framework.
  • PhoneGap an application development platform based on HyperText Markup Language (HTML) and JavaScript
  • React Native a hybrid mobile application development framework.
  • the embodiment of the application does not impose any limitation on the system used by the page.
  • the height range of the display area of the display interface in the list to be displayed is determined based on the scrolling amount of the page; the list to be displayed is a list on the page; at least one unit in the list to be displayed is acquired The height of each of the cells in the grid; according to the height of each of the cells and the height range, determine at least one visible cell located in the display area; display the content of the visible cells; here, Determine the height range of the current display area based on the scrolling amount of the page, and determine the visible cells within the height range according to the height of each cell in the list to be displayed, and display the content of the visible cells, so that the cells are visible
  • the determination does not depend on the API provided by the native system to obtain the visible cells, and relieves the dependence of the page display on the system used.
  • the implementation of S301 includes:
  • the lower limit value represents the offset of the first boundary of the display area relative to the initial boundary of the page; the first boundary overlaps with the first display boundary of the display interface;
  • the lower limit value of the display range is determined based on the scrolling amount of the page, wherein the lower limit value of the display range represents the position of the first boundary of the display area on the page.
  • the page scrolling amount is HS
  • the lower limit of the display range is HE
  • HE HS
  • the upper boundary of the list to be displayed may overlap with the upper boundary of the page, or there may be a certain height gap between them.
  • the upper limit represents the offset of the second boundary of the display area relative to the initial boundary of the page; the second boundary overlaps with the second display boundary of the display interface; the The content of the page is displayed from the first display border to the second display border.
  • the upper limit of the display range represents the position of the second boundary of the display area in the list to be displayed.
  • the client After determining the lower limit value of the height range, the client obtains the upper limit value of the height range according to the height of the display interface and the lower limit value of the height range.
  • the height of the display interface is related to the size of the current display interface.
  • the height of the display interface is determined based on the display direction of the content and the size of the display interface.
  • the size of the display interface is length (L)*width (W).
  • the size of the display interface is length (L)*width (W).
  • the implementation of S303 includes: traversing each of the cells in the to-be-displayed list, taking any of the cells as the target cell, and performing the following processing on the target cell: when the Among the heights of the target cells, if the height to be displayed within the display range is greater than the set height, the target cell is determined to be the visible cell.
  • the client traverses each cell and determines whether each cell is all within the display range or not within the display range.
  • the full height of a cell is within the display range, the height to be displayed within the display range is greater than the set height, and the cell is a visible cell; when the full height of a cell is not within the display range, the cell The cell is not a visible cell; when part of a cell is within the display range, determine the height to be displayed within the height range of the cell's height, and when the height to be displayed is greater than the set height, the cell is a visible cell , when the height to be displayed is less than the set height, the cell is not a visible cell.
  • the set height may be a fixed height value, or may be a product of a fixed height ratio and the height of the cell to be determined.
  • the implementation of S303 further includes: determining the height of the lower border and the height of the upper border of the target cell; the height of the lower border is the height of the lower border of the target cell in the page; The height of the upper border is the height of the upper border of the target cell in the page; according to the height of the lower border, the height of the upper border and the height range, it is determined that the height of the target cell is located at the The height to be displayed within the above display range.
  • the height range of the cell in the list to be displayed can be determined according to all the cells before the cell, wherein the height range of the cell in the list to be displayed is defined by the upper boundary of the cell at The height in the list to be displayed is determined by the height of the lower boundary of the cell in the list to be displayed.
  • the height of the upper border of the cell on the page is determined by the height interval between the upper border of the list to be displayed where the cell is located and the starting border of the page, and the lower border of the cell is at the height of the page.
  • the height, that is, the height of the lower border is determined by the height interval between the lower border of the list to be displayed where the cell is located and the initial border of the page.
  • the interval between the upper boundary of the list to be displayed and the initial boundary of the page may be zero or not.
  • the interval between the upper border of the list to be displayed and the initial border of the page is zero, the upper border of the list to be displayed overlaps with the initial border of the page.
  • the interval height HI between the upper border of the list to be displayed and the upper border of the page is 15, and the height of the upper border of a cell in the list to be displayed is 35, then the upper border of the cell in the page The height is 50.
  • the interval height HI between the upper border of the list to be displayed and the upper border of the page is 0, and the height of the upper border of a cell in the list to be displayed is 35, then the upper border of the cell in the page The height is 35.
  • the height of the lower border of the cell on the page is obtained according to the height of the upper border of the cell and the height of the cell.
  • the height of the upper border of a cell on the page is 35, the height of the cell is 7, and the height of the lower border of the cell is 28.
  • the height of the lower border and the height of the upper border of a cell After determining the height of the lower border and the height of the upper border of a cell, judge the relationship between the height of the upper border, the height of the lower border and the height range. If both the height of the lower border and the height of the upper border are within the height range, all of the cell is located in the display area and it is a visible cell; if the height of the lower border and the height of the upper border are both outside the height range, the cell is not in the display area , is not a visible cell; if one of the height of the lower border and the height of the upper border is within the height range, and the other is outside the height range, then the cell is partially located in the display area.
  • the height of its upper border is H3, the height of its lower border is H4, and both H3 and H4 are located in [H1, H2], then the cell 5017 is a visible cell , cell 5012, its upper border height is H5, its lower border height is H6, and both H5 and H6 are located outside [H1, H2], then cell 5012 is not a visible cell, and the upper border height of cell 5016 is H7,
  • the height of the lower boundary is H8, and H7 is outside [H1, H2], and H8 is inside [H1, H2], then the intersection of [H7, H8] and [H1, H2] is determined, and the intersection [H1, H8] is obtained, and If the height between the intersections [H1, H8] is less than the set height, cell 5016 is not a visible cell.
  • the implementation of determining the height of the lower border and the height of the upper border of the target cell includes:
  • the position of the reference cell in the list to be displayed affects the height of the target cell in the list to be displayed; the height of the target cell superimposed with the height of the reference cell to obtain the height of the upper border; according to the height of the upper border and the height of the target cell, the height of the lower border is obtained.
  • the reference cell is a cell in the to-be-displayed list to which the target cell belongs, whose rendering order is before the target cell and in the same column as the target cell.
  • all the cells whose rendering order is before the cell in the to-be-displayed list to which the cell belongs are reference cells corresponding to the cell. For example, if a list to be displayed includes only one column of cells, the cells whose rendering order is before the target cell are reference cells corresponding to the target cell.
  • some cells in the to-be-displayed list described by a cell whose rendering sequence is before the cell are reference cells corresponding to the cell.
  • a cell in the list to be displayed is displayed in two columns. When the target cell is in the first column, it is in the cell in the first column. The cell whose rendering order is before the target cell is the target cell the reference cell.
  • the reference cells corresponding to cell 5019 include the following cells in the same column as cell 5019: cell 5011, cell 50153, cell Cell 5015 and cell 5017.
  • the parameters of each cell may include a position parameter representing the row where it is located, where the position parameter may be reflected by the rendering order, or may be It is a separate parameter, and in the embodiment of the present application, there is no limitation on the expression form of the position parameter representing the row of a cell.
  • the client can determine the reference cell corresponding to the cell through the position parameter.
  • the client After the client determines the reference cell of a cell, it superimposes the height of each reference cell to obtain the height of the cell in the list to be displayed, and the client bases the height of the cell in the list to be displayed and the The spacing between the list's top border and the page's start border yields the height of the cell's top border.
  • the client obtains the height of the upper boundary of cell 5019 in the list to be displayed based on the superposition of cell heights in cell 5017, cell 5015, cell 5013, and cell 5011, and based on the height of cell 5019
  • the height of the upper border of the to-be-displayed list and the interval between the upper border of the to-be-displayed list and the initial border of the page obtain the height of the upper border of the cell 5019.
  • the client gets the height of the lower border of a cell based on the height of the upper border of the cell and the height of the cell itself.
  • the implementation of S304 displaying the content of the visible cells includes:
  • the client may determine the content type of each visible cell, where the content type of the cell may include: text, picture, video, and so on.
  • the type of the content of a cell is text
  • the text is directly loaded
  • the type of the content of a cell is an image
  • the image is directly obtained based on the address of the image under the cell in the page data
  • the video component is required to play the video based on the video address under the cell in the page data.
  • the client determines the video cells in the visible cells, and the visible cells in the display area may include one or more video cells.
  • the client plays the content of each video cell in the plurality of video cells.
  • a video playback management service may be set, and based on the video playback management service, video cells are played.
  • the implementation of S3043 playing the content of the at least one video unit includes: adding the at least one video unit to the play queue according to the display order of the at least one video unit; The order of the at least one video unit in the playing queue is to play the content of the at least one video unit.
  • the client can set a play queue, and put the identifiers of each video unit into the play queue, so as to play the video cells according to the order of the video cells in each play queue.
  • the video playback management service may call each video unit in the playback queue, and when a video unit is played, the next video unit is played.
  • each video cell is given a position number in the play queue according to the display order of the video cells, and the video cells are played sequentially through the position numbers.
  • the playback queue can be cleared based on the following methods: the method onScrollBeginDrag triggered when a subpage in a page slides and starts to drag, the method onMomentumScrollBegin called when a page scroll starts, and so on.
  • onScrollBeginDra onMomentumScrollBegin
  • onMomentumScrollEnd onMomentumScrollEndDrag
  • onScrollBeginDrag is a subpage in a page where sliding starts and dragging starts
  • OnMomentumScrollBegin is called when a page scrolls
  • onMomentumScrollEnd is called when a page scrolls
  • onScrollEndDrag is called when a subpage scrolls and drags.
  • the playlist can be realized by an array (playArray).
  • the playback queue is cleared during page scrolling, which can ensure that only the video cells in the current display area when the page needs to be displayed without scrolling are placed in the playback queue, so as to avoid adding video cells to the playback queue all the time
  • the resulting page freezes when more and more elements are accumulated in the playback queue, ensuring video playback while improving the display performance of the list on the page.
  • the page display method provided by the embodiment of the present application in react native, can accurately calculate the number of cells exposed on the screen after each swipe, and automatically play the content of the cells whose content is video in order.
  • the play manager (playManager) and the play array (palyArray), wherein the playManager is used to execute the automatic playback of the video, and the playArray is used to place the cell to be played currently (item) .
  • the video-type item in the current display area is put into playArray as an element of playArray, and at the same time, playManager starts to start.
  • the content types of items 601, 602, and 603 on the page are videos, and the terminal device puts the identifiers of these three items as elements of playArray. to playArray, and at the same time, playManager starts to start.
  • the execution rules of playManager are: at the right time, traverse to find the elements in the current playArray, and play the video files of the video components of each element in the playArray in order.
  • the next item will be used as Callback content, in the playback completion callback, the video file in the next item can be played.
  • the page on the screen receives a sliding operation, the page slides, and the visible items on the screen change, when the methods onScrollBeginDrag and onMomentumScrollBegin of the list are called, the playArray is cleared at the same time. Among them, during the page scrolling process, the video does not need to be automatically played.
  • the display area on the screen in the page is shown in FIG. 7 , and the items that need to be stored in playArray include: item 701 and item 702 .
  • the calculation rules for calculating which items in the display area need to be stored in playArray include:
  • the terminal device When the network request is completed and the data is analyzed, the terminal device will add a parameter to the data part of each item: itemHeight (itemHeight), this parameter represents the height occupied by an item.
  • itemHeight this parameter represents the height occupied by an item.
  • the terminal device can obtain the offset of the current list Shift offsetY, so we only need to loop the data source of the list, superimpose the height of each item, and get the superimposed height itemsHeight, then we can know that the item is at the offset offsetY. From this item, it is exposed on the screen If the item is of video type, it will be added to playArray.
  • the overlay height itemsHeight is greater than or equal to (offsetY+display area height), the subsequent items will not be exposed on the screen, and the loop ends.
  • the terminal device uses the playManager tool to realize automatic playback.
  • the page scrolls again continue to repeat the processing when the page slides.
  • FIG. 8 is a schematic structural diagram of a page display device according to an embodiment of the present application. As shown in FIG. 8 , the page display device 800 includes:
  • the first determining unit 801 is configured to determine the height range of the display area of the display interface in the list to be displayed based on the scrolling amount of the page; the list to be displayed is a list in the page;
  • the obtaining unit 802 is configured to obtain the height of each cell in at least one cell in the to-be-displayed list;
  • the second determining unit 803 is configured to determine the visible cells located in the display area for the height and the height range of each of the cells;
  • the display unit 804 is configured to display the content of the visible cells.
  • the first determining unit 801 is further configured to:
  • the upper limit of the display range characterizes the offset of the second boundary of the display area relative to the initial boundary of the page; the second boundary Overlapping with a second display boundary of the display interface; the content of the page is displayed from the first display boundary to the second display boundary.
  • the second determination unit 803 is further configured to:
  • the target cell is determined to be the visible cell.
  • the second determination unit 803 is further configured to:
  • the height of the lower border is the height of the lower border of the target cell in the page
  • the height of the upper border is the height of the upper border of the target cell the height of the border in said page
  • the height of the upper border determines the height to be displayed that is within the display range among the heights of the target cell.
  • the second determination unit 803 is further configured to:
  • the position of the reference cell in the list to be displayed affects the height of the target cell in the list to be displayed
  • the height of the lower border is obtained according to the height of the upper border and the height of the target cell.
  • the display unit 804 is further configured to:
  • the display unit 804 is further configured to:
  • the page display device 800 further includes:
  • a receiving unit configured to receive a scrolling operation for the page
  • An emptying unit configured to empty the play queue based on the scrolling operation.
  • each logic unit included in the page display device can be realized by a processor in an electronic device; of course, it can also be realized by a specific logic circuit; during the implementation process, the processor It can be a central processing unit (CPU, Central Processing Unit), a microprocessor (MPU, Micro Processor Unit), a digital signal processor (DSP, Digital Signal Processor) or a field programmable gate array (FPGA, Field-Programmable Gate Array) Wait.
  • CPU Central Processing Unit
  • MPU Micro Processor Unit
  • DSP Digital Signal Processor
  • FPGA Field-Programmable Gate Array
  • the above page display method is implemented in the form of software function modules and sold or used as an independent product, it can also be stored in a computer-readable storage medium.
  • the computer software products are stored in a storage medium and include several instructions to make A computer device (which may be a personal computer, a server, or a network device, etc.) runs all or part of the methods described in the various embodiments of the present application.
  • the aforementioned storage medium includes: various media that can store program codes such as U disk, mobile hard disk, read-only memory (Read Only Memory, ROM), magnetic disk or optical disk.
  • embodiments of the present application are not limited to any specific combination of hardware and software.
  • the embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and operable on the processor, and the processor implements the steps in the above page display method when running the computer program .
  • the embodiments of the present application provide a storage medium, that is, a computer-readable storage medium, on which a computer program is stored, and when the computer program is run by a processor, the page display method provided in the above-mentioned embodiments is implemented.
  • FIG. 9 is a schematic diagram of a hardware entity of an electronic device according to an embodiment of the present application.
  • the electronic device 900 includes: a processor 901, at least one communication bus 902, and at least one external communication interface 904 and memory 905.
  • the communication bus 902 is configured to realize connection and communication between these components.
  • the electronic device 900 further includes: a user interface 903, wherein the user interface 903 may include a display screen, and the external communication interface 904 may include a standard wired interface and a wireless interface.
  • the memory 905 is configured to store instructions and applications executable by the processor 901, and also cache data to be processed or processed by the processor 901 and various modules in the electronic device (for example, image data, audio data, voice communication data and video data) Communication data), which can be realized by flash memory (FLASH) or random access memory (Random Access Memory, RAM).
  • the disclosed devices and methods may be implemented in other ways.
  • the device embodiments described above are only illustrative.
  • the division of the units is only a logical function division.
  • the coupling, or direct coupling, or communication connection between the components shown or discussed may be through some interfaces, and the indirect coupling or communication connection of devices or units may be electrical, mechanical or other forms of.
  • the units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units; they may be located in one place or distributed to multiple network units; Part or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • each functional unit in each embodiment of the present application can be integrated into one processing unit, or each unit can be used as a single unit, or two or more units can be integrated into one unit; the above-mentioned integration
  • the unit can be realized in the form of hardware or in the form of hardware plus software functional unit.
  • the above-mentioned integrated units of the present application are realized in the form of software function modules and sold or used as independent products, they can also be stored in a computer-readable storage medium.
  • the computer software products are stored in a storage medium and include several instructions to make A computer device (which may be a personal computer, a server, or a network device, etc.) executes all or part of the methods described in the various embodiments of the present application.
  • the aforementioned storage medium includes various media capable of storing program codes such as removable storage devices, ROMs, magnetic disks or optical disks.

Landscapes

  • Engineering & Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Theoretical Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Accounting & Taxation (AREA)
  • Finance (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • Economics (AREA)
  • General Business, Economics & Management (AREA)
  • Strategic Management (AREA)
  • Marketing (AREA)
  • Development Economics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种页面显示方法、装置、设备及存储介质。所述方法包括：基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；获取所述待显示列表中至少一个单元格中每一所述单元格的高度；根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格；显示所述可见单元格的内容。

Description

页面显示方法及装置、设备、存储介质
相关申请的交叉引用
本申请基于申请号为202110653420.X、申请日为2021年6月11日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此以引入方式并入本申请。
技术领域
本申请涉及计算机技术领域，涉及但不限于一种页面显示方法及装置、设备、存储介质。
背景技术
随着电商行业的发展，人们经常在网络进行商品的选购，为了让用户看到更多的商品，通常会通过一个长列表展示可供用户选购的商品。为了使用户在列表中获得关于展示的商品的更多的信息，通过图片或视频来展示商品，此时，列表中的单元格，有些内容是视频，有些内容是图片，这种列表需要在页面加载出来或者停止滚动之后按顺序自动播放视频。而列表展示的过程，在客户端原生方面会比较容易实现，比如iOS中设置获知当前屏幕中可见单元格的应用程序接口(Application Programming Interface，API)，但很多设备的系统不支持该API，则无法获知列表中哪些单元格位于屏幕中。
发明内容
本申请实施例的技术方案是这样实现的：
第一方面，本申请实施例提供一种页面显示方法，所述方法包括：
基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；
获取所述待显示列表中至少一个单元格中每一所述单元格的高度；
根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格；
显示所述可见单元格的内容。
第二方面，本申请实施例提供一种页面显示装置，包括：
第一确定单元，用于基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；
获取单元，用于获取所述待显示列表中至少一个单元格中每一所述单元格的高度；
第二确定单元，用于根据所述待显示列表中的单元格的高度和所述高度范围，确定位于所述显 示区域的可见单元格；
显示单元，用于显示所述可见单元格的内容。
第三方面，本申请实施例提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器运行所述计算机程序时实现上述页面显示方法中的步骤。
第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器运行时实现上述页面显示方法中的步骤。
附图说明
图1为本申请实施例页面显示系统的可选地架构示意图；
图2为本申请实施例页面显示系统的可选地架构示意图；
图3为本申请实施例提供的页面显示方法的可选地流程示意图；
图4为本申请实施例提供的页面显示的可选地效果示意图；
图5为本申请实施例提供的列表显示的可选地效果示意图；
图6为本申请实施例提供的列表显示的可选地效果示意图；
图7为本申请实施例提供的列表显示的可选地效果示意图；
图8为本申请实施例提供的页面显示装置的可选地结构示意图；
图9为本申请实施例提供的电子设备的可选地结构示意图。
具体实施方式
为为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对申请的具体技术方案做进一步详细描述。以下实施例用于说明本申请，但不用来限制本申请的范围。
本申请实施例可提供为页面显示方法、装置和存储介质。实际应用中，页面显示方法可由页面显示装置实现，页面显示装置中的各功能实体可以由电子设备(如终端设备或服务器)的硬件资源，如处理器等计算资源、通信资源(如用于支持实现光缆、蜂窝等各种方式通信)协同实现。
本申请实施例的页面显示方法可应用于图1所示的页面显示系统，如图1所示，包括：客户端10，其中，客户端中可运行有能够展示页面的应用程序，客户端10基于输入设备与用户进行交互，接收用户输入的访问请求，基于用户的访问请求在应用程序上展示访问请求对应的页面。
客户端10还可基于输入设备接收页面的滚动操作，以对页面中位于显示界面的显示区域进行更新。其中，输入设备包括：显示器、鼠标、键盘等能够接收用户的操作的器件。
在一示例中，客户端10的显示界面展示的页面中包括有列表101，列表101中有多个单元格102，这里，将展示在显示界面中的单元格称为可见单元格。
在一示例中，如图2所示，页面显示系统还包括有服务端20，服务端20通过网络30能够与客 户端10进行通信。其中，客户端10可将访问请求转发至服务端20，以向服务端20请求所访问的页面的数据。
在一示例中，客户端10基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；获取所述待显示列表中至少一个单元格中每一所述单元格的高度；根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格；显示所述可见单元格的内容，使得在显示界面中呈现页面的当前显示区域的各个单元格的内容。
结合上述页面显示系统，本实施例提出一种页面显示方法，能够在不依赖原生系统提供的API的情况下，获知当前列表中位于显示界面中需要展示的单元格。
下面，结合图1或图2所示的页面显示系统，对本申请实施例提供的页面显示方法、装置、设备和存储介质的各实施例进行说明。
本实施例提供一种页面显示方法。该方法所实现的功能可以通过电子设备中的处理器调用程序代码来实现，当然程序代码可以保存在计算机存储介质中，可见，该电子设备至少包括处理器和存储介质。
图3为本申请实施例的一种页面显示方法的实现流程示意图，如图3所示，该方法可以包括如下步骤：
S301、客户端基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围。
所述待显示列表为所述页面中的列表。
当页面初始化或滚动停止后，客户端可获取页面的滚动量。在一示例中，在页面滚动场景下，页面可基于页面滚动停止的方法来进行页面的滚动量的获取。比如：基于一页面滚动完毕后调用的方法onMomentumScrollEnd、或一个页面滚动结束拖曳时触发的方法onScrollEndDrag来执行页面的滚动量的获取。
这里，页面的滚动量为页面当前的显示区域相对于页面第一次加载时的初始页面的位移量。当前页面为初始加载时，页面的滚动量为零，当前页面不是初始加载而是接收到用户的滚动操作后，滚动量为页面的至少一次滚动操作中每一次滚动操作的滚动量的叠加和，其中，滚动量本身是有方向的，当从上至下滚动时，方向为正，当从下至上滚动时，方向为负。
本申请实施例中，客户端在显示页面时，可对页面的尺寸进行调整，将页面的宽度保持与显示界面的宽度保持一致，页面的高度大于显示界面的高度，此时，客户端的显示界面在显示时，显示界面中每次仅显示页面的部分区域。
在一示例中，页面初始加载时，如图4中(1)所示，在显示界面中展示区域401，当区域401接收到滚动方向为方向402的滚动操作时，在显示界面中展示如图4中的(2)所示的区域403，当区域403接收到滚动方向为方向404的滚动操作时，在显示界面中展示如图4中的(3)所示区域405。需要说明的是，图4中，页面中虚拟部分所示的区域为未展示在显示界面中的不可视区域，页 面中实线部分所示的区域为展示在显示界面中的可视区域。
客户端获取页面的滚动量后，根据页面的滚动量来确定显示区域的高度范围，显示区域为待显示列表的位于显示界面中的区域，这里，显示区域的高度范围表征待显示列表需要显示在显示界面中的区域的大小。
如图5所示，列表501中位于显示界面502的显示区域的高度范围为[H1，H2]，此时，列表501的位于高度范围[H1，H2]之间的区域为显示区域，显示在显示界面502中。
待显示列表为页面中的任一列表。其中，列表中可包括多个单元格，不同单元格用于展示不同的内容。在一示例中，在一商品列表中，不同的单元格用于展示不同的商品。在一示例中，在一视频列表中，不同的单元格用于展示不同的视频。本申请实施例中，对列表的大小和展示的内容不进行任何限定。
这里，当待显示列表的部分区域位于显示界面中，页面接收到滚动操作时，页面进行滚动的同时，待显示列表也随着滚动。
本申请实施例中，当页面初始加载或接收的滚动操作停止后，基于滚动操作确定当前页面的滚动量，并基于滚动量确定当前显示区域的高度范围。
S302、客户端获取所述待显示列表所包括的至少一个单元格中每一所述单元格的高度。
本申请实施例中，当客户端从服务端接收页面的数据后，确定待显示列表中每一单元格的高度。在一示例中，客户端从服务端接收的数据中携带每一单元格的高度。在一示例中，客户端从服务端接收的数据中不携带每一单元格的高度，此时，客户端可在接收的数据中添加每一单元格的高度。
S303、客户端根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格。
客户端确定待显示列表中每一单元格的高度，并根据单元格的渲染顺序确定每一单元格在待显示列表中的高度，并且根据各单元格在待显示列表中的高度和高度范围，确定各单元格是否位于显示区域，如果一个单元格在显示列表中的高度位于高度范围内，表征该单元格位于显示区域内，为用户通过显示界面可见的可见单元格，如果一个单元格在待显示列表中的高度不在高度范围内，表征该单元格不在显示区域内，不是用户通过显示界面可见的可见单元格，而是用户不可见的单元格。
在图5中，单元格5011、单元格5012、单元格5013、单元格5014、单元格5015和单元格5016在待显示列表中的高度不在高度范围[H1，H2]中，单元格5017、单元格5018、单元格5019和单元格5010在待显示列表中的高度在高度范围[H1，H2]中，则可见单元格包括：单元格5017、单元格5018、单元格5019和单元格5010。
S304、客户端显示所述可见单元格的内容。
当客户端确定可见单元格之后，根据各可见单元格的渲染顺序，对各可见单元格进行渲染，从而在显示界面中显示待显示列表中的可见单元格。
本申请实施例中，页面所使用的系统可为各种开发系统，比如：基于超文本标记语言(HyperText Markup Language，HTML)和JavaScript的应用开发平台PhoneGap、混合移动应用开发框架React  Native等，本申请实施例对页面所使用的系统不进行任何限定。
本申请实施例中，基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；获取所述待显示列表中至少一个单元格中每一所述单元格的高度；根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格；显示所述可见单元格的内容；这里，基于页面的滚动量来确定当前显示区域的高度范围，并根据待显示列表中每个单元格的高度来确定位于高度范围内的可见单元格，对可见单元格的内容进行展示，从而可见单元格的确定不依赖于原生系统提供的获知可见单元格的API，解除页面显示对所使用的系统的依赖性。
在一些实施例中，S301的实施包括：
S3011、基于页面的滚动量，确定所述显示范围的下限值。
S3012、基于所述显示界面的尺寸，确定所述显示范围的上限值。
在S3011中，所述下限值表征所述显示区域的第一边界相对于所述页面起始边界的偏移量；所述第一边界与所述显示界面的第一显示边界重叠；
本申请实施例中，基于页面的滚动量确定显示范围的下限值，其中，显示范围的下限值表征显示区域的第一边界在页面中的位置。
这里，页面的滚动量为HS，显示范围的下限值为HE，则HE＝HS。
可选地，本申请实施例中，待显示列表的上边界可与页面的上边界重叠，也可之间存在一定的高度间隔。
在S3012中，所述上限值表征所述显示区域的第二边界相对于所述页面起始边界的偏移量；所述第二边界与所述显示界面的第二显示边界重叠；所述页面的内容自所述第一显示边界向所述第二显示边界显示。这里，显示范围的上限值表征显示区域的第二边界在待显示列表中的位置。
客户端在确定高度范围的下限值后，根据显示界面的高度和高度范围的下限值得到高度范围的上限值。这里，显示界面的高度与当前显示界面的尺寸相关。其中，显示界面的高度基于内容的显示方向和显示界面的尺寸确定。
在一示例中，显示界面的尺寸为长(L)*宽(W)，当显示界面竖屏显示内容时，显示界面的高度为L，则高度范围的上限值HT＝HE+L。
在一示例中，显示界面的尺寸为长(L)*宽(W)，当显示界面横屏显示内容时，显示界面的高度为W，则高度范围的上限值HT＝HE+W。
在一些实施例中，S303的实施包括：遍历所述待显示列表中每一所述单元格，以任一所述单元格为目标单元格，对所述目标单元格执行以下处理：当所述目标单元格的高度中，位于所述显示范围内的待显示高度大于设定高度，确定所述目标单元格为所述可见单元格。
这里，客户端遍历每一个单元格，并确定每一个单元格是否全部位于显示范围内或者全部不位于显示范围内。当一个单元格全部高度位于显示范围内，则位于所述显示范围内的待显示高度大于设定高度，该单元格为可见单元格；当一个单元格全部高度不位于显示范围内，则该单元格不是可 见单元格；当一个单元格的部分位于显示范围内，则确定该单元格的高度中位于高度范围内的待显示高度，当待显示高度大于设定高度，该单元格为可见单元格，当待显示高度小于设定高度，该单元格不是可见单元格。
本申请实施例中，设定高度可为固定的高度值，也可为固定的高度比例和需要判定的单元格的高度的乘积。
在一些实施例中，S303的实施还包括：确定所述目标单元格的下边界高度和上边界高度；所述下边界高度为所述目标单元格的下边界在所述页面中的高度；所述上边界高度为所述目标单元格的上边界在所述页面中的高度；根据所述下边界高度、所述上边界高度和所述高度范围，确定所述目标单元格的高度中位于所述显示范围内的待显示高度。
本申请实施例中，根据一个单元格之前的所有的单元格能够确定该单元格在待显示列表中的高度范围，其中，该单元格在待显示列表中的高度范围由该单元的上边界在待显示列表中的高度和该单元格的下边界在待显示列表中的高度确定。该单元格的上边界在页面中的高度即上边界高度由该单元格所在的待显示列表的上边界与页面的起始边界之间的高度间隔确定，该单元格的下边界在页面中的高度即下边界高度由该单元格所在的待显示列表的下边界与页面的起始边界之间的高度间隔确定。其中，待显示列表中的上边界与页面的起始边界之间的间隔可为零，也可不为零。当待显示列表中的上边界与页面的起始边界之间的间隔为零，则待显示列表中的上边界与页面的起始边界重叠。
在一示例中，待显示列表的上边界与页面的上边界之间的间隔高度HI为15，一个单元格在待显示列表中的上边界高度为35，则该单元格在页面中的上边界高度为50。
在一示例中，待显示列表的上边界与页面的上边界之间的间隔高度HI为0，一个单元格在待显示列表中的上边界高度为35，则该单元格在页面中的上边界高度为35。
对于一个单元格，确定该单元格在页面中的上边界高度后，根据该单元格的上边界高度和该单元格的高度，得到该单元格在页面中的下边界高度。
在一示例中，一个单元格在页面中的上边界高度为35，该单元格的高度为7，则该单元格的下边界高度为28。
在确定一个单元格的下边界高度和上边界高度后，判断上边界高度和下边界高度与高度范围的关系。当下边界高度和上边界高度都位于高度范围内，则该单元格的全部位于显示区域中，为可见单元格；当下边界高度和上边界高度都位于高度范围外，则该单元格不在显示区域中，不是可见单元格；当下边界高度和上边界高度中的一个位于高度范围内，一个位于高度范围外，则该单元格部分位于显示区域，此时，确定该下边界高度和上边界高度构成的区间与高度范围的交集，并判断交集与设定高度的关系，当交集大于设定高度，则该单元格为可见单元格，否则，该单元格不是可见单元格。
在一示例中，如图5中的中的单元格5017，其上边界高度为H3，下边界高度为H4，且H3和H4都位于[H1，H2]内，则单元格5017为可见单元格，单元格5012，其上边界高度为H5，下边界 高度为H6，且H5和H6都位于[H1，H2]外，则单元格5012不是可见单元格，单元格5016的上边界高度为H7，下边界高度为H8，且H7位于[H1，H2]外，H8位于[H1，H2]内，则确定[H7，H8]和[H1，H2]的交集，得到交集[H1，H8]，且交集[H1，H8]之间的高度小于设定高度，则单元格5016不是可见单元格。
在一些实施例中，所述确定所述目标单元格的下边界高度和上边界高度的实施包括：
确定所述目标单元格对应的参考单元格；所述参考单元格在所述待显示列表中的位置影响所述目标单元格在所述待显示列表中的高度；将所述目标单元格的高度和所述参考单元格的高度进行叠加，得到所述上边界高度；根据所述上边界高度和所述目标单元格的高度，得到所述下边界高度。
本申请实施例中，对于一个单元格，其在页面中的高度受全部或部分单元格的影响，这里，将影响该单元格在页面中的高度的单元格称为参考单元格。本申请实施例中，参考单元格为目标单元格所属的待显示列表中，渲染顺序位于目标单元格之前且与目标单元格位于同一列的单元格。
在一示例中，一个单元格所属的待显示列表中渲染顺序位于该单元格之前的所有单元格都为该单元格对应的参考单元格。比如：一个待显示列表中仅包括一列单元格，则渲染顺序位于目标单元格之前的各单元格均为该目标单元格对应的参考单元格。
在一示例中，一个单元格所述的待显示列表中渲染顺序位于该单元格之前的部分单元格为该单元格对应的参考单元格。比如：一个待显示列表中的单元格分两列进行展示，当目标单元格位于第一列，则位于第一列的单元格中，渲染顺序位于目标单元格之前的单元格为目标单元格对应的参考单元格。在图5所示的待显示列表中，当目标单元格为单元格5019，单元格5019对应的参考单元格包括与单元格5019位于同一列的以下单元格：单元格5011、单元格50153、单元格5015和单元格5017。
本申请实施例中，当待显示列表中的单元格分为多列进行显示时，各单元格的参数中可包括表征所在行的位置参数，其中，该位置参数可通过渲染顺序体现，也可为单独的参数，本申请实施例中，对表征一个单元格的所在行的位置参数的表现形式不进行任何限定。对于目一单元格，客户端可通过位置参数确定该单元格对应的参考单元格。
客户端确定一个单元格的参考单元格后，对各参考单元格的高度进行叠加，得到该单元格在待显示列表中的高度，客户端根据该单元格在待显示列表中的高度和待显示列表的上边界与页面的起始边界之间的间隔得到该单元格的上边界高度。
在一示例中，客户端基于单元格5017、单元格5015、单元格5013和单元格5011中各单元格高度叠加得到单元格5019的上边界在待显示列表中的高度，且基于单元格5019的上边界在待显示列表中的高度和待显示列表的上边界与页面的起始边界之间的间隔得到单元格5019的上边界高度。
客户端基于一个单元格的上边界高度和该单元格本身的高度得到该单元格的下边界高度。
在一些实施例中，S304显示所述可见单元格的内容的实施包括：
S3041、判断所述至少一个可见单元格中每一所述可见单元格的内容的类型；
S3042、确定所述至少一个可见单元格中，所述类型为视频的至少一个视频单元格；
S3043、对所述至少一个视频单元格的内容进行播放。
本申请实施例中，客户端可确定各可见单元格的内容类型，其中，单元格的内容的类型可包括：文本、图片、视频等。当一个单元格的内容的类型为文本，则直接加载文本，当一个单元格的内容的类型为图片，则直接基于页面数据中该单元格下的图片的地址获取图片，当一个单元格的内容的类型为视频，则需要视频组件来基于页面数据中该单元格下的视频地址进行视频的播放。
本申请实施例中，客户端确定可见单元格中的视频单元格，且显示区域的可见单元格中可包括一个或多个视频单元格。客户端对多个视频单元格中各视频单元格的内容进行播放。
本申请实施例中，可设置一视频播放管理服务，基于该视频播放管理服务执行视频单元格的播放。
在一些实施例中，S3043对所述至少一个视频单元格的内容进行播放的实施包括：根据所述至少一个视频单元格的展示顺序，将所述至少一个视频单元格添加至播放队列中；根据所述播放队列中所述至少一个视频单元格的顺序，播放所述至少一个视频单元格的内容。
本申请实施例中，客户端可设置一播放队列，将各视频单元格的标识放入播放队列，以根据各播放队列中的视频单元格的顺序来进行视频单元格的播放。
这里，视频播放管理服务可调用播放队列中的各视频单元格，当一个视频单元格播放完成后，播放下一视频单元格。
在实际应用中，当视频单元格添加到播放队列后，根据视频单元格的展示顺序赋予各视频单元格在播放队列中的位置编号，通过位置编号进行视频单元格的顺序播放。
在一些实施例中，在S3041之后，还实施以下步骤：
接收针对所述页面的滚动操作；基于所述滚动操作，清空所述播放队列。
本申请实施例中，当接收到针对页面的滚动操作，执行页面的滚动，此时，待显示列表中位于显示界面的显示区域更新。这里，可基于以下方法来清空播放队列：一个页面中的子页面滑动开始拖动开始时触发的方法onScrollBeginDrag、一页面滚动开始时调用的方法onMomentumScrollBegin等。
本申请实施例中，当页面使用的框架为react native，在执行页面滚动过程时，可触发以下方法：onScrollBeginDra、onMomentumScrollBegin、onMomentumScrollEnd和onScrollEndDrag，其中，onScrollBeginDrag是一个页面中的子页面滑动开始拖动开始时触发，onMomentumScrollBegin是一页面滚动开始时调用，onMomentumScrollEnd是一页面滚动完毕时调用，onScrollEndDrag是一个子页面滚动结束拖拽时触发。
客户端在执行滚动开始时，将播放队列进行清空，使得滚动过程中，播放队列的元素为空。这里，播放列表可为通过一个数组(playArray)来实现。
本申请实施例中，在页面滚动过程中对播放队列进行清空，能够保证播放队列中只放置未滚动下需要显示页面时当前显示区域的视频单元格，从而避免一直往播放队列中添加视频单元格所导致的播放队列中积累越来越多的元素情况下的页面卡顿，保证视频播放的同时，提高页面中列表的显 示性能。
下面，以使用的框架为react native为例，对本申请实施例提供的页面显示方法进行进一步说明。
相关技术中，react native中，没有关于获取屏幕可见单元格的的系统方法，有一个监听显示屏幕中单元格变化的API：onViewableItemsChanged，但该API的监听结果是非常不准确的，在很多情况下，单元格都已经展示在屏幕之中，而该方法中还未获取到相关信息，并且这个API只是可见行元素变化时调用，真正需要的是监听当前哪些数据item在可见范围内，这个API是无法满足可见单元格的获取的需求。
本申请实施例提供的页面显示方法，在react native中，能够准确计算每次滑动之后，暴露在屏幕上的单元格的个数，并且按顺序自动进行播放内容为视频的单元格的内容。
本申请实施例中，设置两个变量：播放管理器(playManager)和播放数组(palyArray)，其中，playManager用于执行视频的自动播放，playArray用于放置当前所要播放的单元格即项(item)。
当页面初始加载过程中的网络请求结束后，将当前显示区域中的内容是视频类型的项作为playArray的元素放到playArray中，同时，playManager开始启动。
在一示例中，当页面初始加载的显示区域如图6所示，页面中的项601、项602、项603的内容的类型是视频，终端设备将这三个项的标识作为playArray的元素放到playArray中，同时，playManager开始启动。
playManager的执行规则是：在合适的时机，遍历寻找当前playArray中的元素，按顺序播放中playArray中各元素的视频组件的视频文件，当一个项中的视频文件播放完成之后会将下一项作为回调内容，在播放完成的回调中，可以进行下一个项中的视频文件的播放。这里，合适的时机为终端设备确定可见单元格中的视频单元格，并将视频单元格放入playArray中。
当屏幕中的页面接收到滑动操作，页面滑动，屏幕上的可见项发生变化，在调用列表的方法onScrollBeginDrag和onMomentumScrollBegin时，同时将playArray清空，其中，在页面滚动过程当中，视频是不需要进行自动播放的。
当屏幕中的页面停止滑动，在列表的onMomentumScrollEnd和onScrollEndDrag方法中会有回调，我们可以选择在这两个方法中，判断当前playArray中应该存入的正确item，也就是说，在这两个方法中任一方法的回调函数中判断哪些item需要存入playArray。
当页面停止滑动时，页面中位于屏幕的显示区域如图7所示，需要存入playArray中的项包括：项701和项702。
本申请实施例中，计算显示区域中哪些项需要存入playArray的计算规则包括：
在网络请求完成，进行数据解析的时候，终端设备会给每个item的数据部分增加一个参数：项高(itemHeight)，这个参数代表一个item所占用的高度.终端设备可以获取到当前列表的偏移量offsetY，这样我们只需要循环列表的数据源，叠加每个item的高度，得到叠加高度itemsHeight，就可以知道，在偏移量offsetY处是那个item，从这个item开始，就是暴露在屏幕中的item，如果是 视频类型的，则添加到playArray中，当叠加高度itemsHeight大于或等于(offsetY+显示区域高度)的时候，在往后的item就不是暴露在屏幕中的item了，循环结束。
当playArray数组里面有了正确的并且是按顺序添加的项，终端设备使用playManager工具实现自动播放，当页面再次滚动时，继续重复执行页面滑动时的处理即可。
图8为本申请实施例的一种页面显示装置的结构示意图，如图8所示，页面显示装置800包括：
第一确定单元801，配置为基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；
获取单元802，配置为获取所述待显示列表中至少一个单元格中每一所述单元格的高度；
第二确定单元803，配置为每一所述单元格的高度和所述高度范围，确定位于所述显示区域的可见单元格；
显示单元804，配置为显示所述可见单元格的内容。
在一些实施例中，第一确定单元801还配置为：
基于页面的滚动量，确定所述显示范围的下限值，所述下限值表征所述显示区域的第一边界相对于所述页面起始边界的偏移量；所述第一边界与所述显示界面的第一显示边界重叠；
基于所述显示界面的尺寸，确定所述显示范围的上限值，所述上限值表征所述显示区域的第二边界相对于所述页面起始边界的偏移量；所述第二边界与所述显示界面的第二显示边界重叠；所述页面的内容自所述第一显示边界向所述第二显示边界显示。
在一些实施例中，第二确定单元803还配置为：
遍历每一所述单元格，以任一所述单元格为目标单元格，对所述目标单元格执行以下处理：
当所述目标单元格的高度中，位于所述显示范围内的待显示高度大于设定高度，确定所述目标单元格为所述可见单元格。
在一些实施例中，第二确定单元803还配置为：
确定所述目标单元格的下边界高度和上边界高度；所述下边界高度为所述目标单元格的下边界在所述页面中的高度；所述上边界高度为所述目标单元格的上边界在所述页面中的高度；
根据所述下边界高度、所述上边界高度和所述高度范围，确定所述目标单元格的高度中位于所述显示范围内的待显示高度。
在一些实施例中，第二确定单元803还配置为：
确定所述目标单元格对应的参考单元格；所述参考单元格在所述待显示列表中的位置影响所述目标单元格在所述待显示列表中的高度；
将所述目标单元格的高度和所述参考单元格的高度进行叠加，得到所述上边界高度；
根据所述上边界高度和所述目标单元格的高度，得到所述下边界高度。
在一些实施例中，显示单元804还配置为：
判断所述至少一个可见单元格中每一所述可见单元格的内容的类型；
确定所述至少一个可见单元格中，所述类型为视频的至少一个视频单元格；
对所述至少一个视频单元格的内容进行播放。
在一些实施例中，显示单元804还配置为：
根据所述至少一个视频单元格的展示顺序，将所述至少一个视频单元格添加至播放队列中；
根据所述播放队列中所述至少一个视频单元格的顺序，播放所述至少一个视频单元格的内容。
在一些实施例中，页面显示装置800还包括：
接收单元，用于接收针对所述页面的滚动操作；
清空单元，用于基于所述滚动操作，清空所述播放队列。
需要说明的是，本申请实施例提供的页面显示装置所包括的各逻辑单元，可以通过电子设备中的处理器来实现；当然也可通过具体的逻辑电路实现；在实施的过程中，处理器可以为中央处理器(CPU，Central Processing Unit)、微处理器(MPU，Micro Processor Unit)、数字信号处理器(DSP，Digital Signal Processor)或现场可编程门阵列(FPGA，Field-Programmable Gate Array)等。
以上系统实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请系统实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
需要说明的是，本申请实施例中，如果以软件功能模块的形式实现上述的页面显示方法，并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)运行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本申请实施例不限制于任何特定的硬件和软件结合。
本申请实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器运行所述计算机程序时实现上述页面显示方法中的步骤。
对应地，本申请实施例提供一种存储介质，也就是计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器运行时实现上述实施例中提供的页面显示方法。
这里需要指出的是：以上存储介质实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请存储介质实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
需要说明的是，图9为本申请实施例电子设备的一种硬件实体示意图，如图9所示，所述电子设备900包括：一个处理器901、至少一个通信总线902、至少一个外部通信接口904和存储器905。其中，通信总线902配置为实现这些组件之间的连接通信。在一示例中，电子设备900还包括：用户接口903、其中，用户接口903可以包括显示屏，外部通信接口904可以包括标准的有线接口和无线接口。
存储器905配置为存储由处理器901可运行的指令和应用，还可以缓存待处理器901以及电子设备中各模块待处理或已经处理的数据(例如，图像数据、音频数据、语音通信数据和视频通信数据)，可以通过闪存(FLASH)或随机访问存储器(Random Access Memory，RAM)实现。
应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一些实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。
上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元；既可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。
或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等) 执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (11)

  1. 一种页面显示方法，所述方法包括：
    基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；
    获取所述待显示列表中至少一个单元格中每一所述单元格的高度；
    根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格；
    显示所述可见单元格的内容。
  2. 根据权利要求1所述的方法，其中，所述确定待显示列表的位于显示界面的显示区域的显示范围，包括：
    基于页面的滚动量，确定所述显示范围的下限值，所述下限值表征所述显示区域的第一边界相对于所述页面起始边界的偏移量；所述第一边界与所述显示界面的第一显示边界重叠；
    基于所述显示界面的尺寸，确定所述显示范围的上限值，所述上限值表征所述显示区域的第二边界相对于所述页面起始边界的偏移量；所述第二边界与所述显示界面的第二显示边界重叠；所述页面的内容自所述第一显示边界向所述第二显示边界显示。
  3. 根据权利要求1或2所述的方法，其中，所述根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格，包括：
    遍历每一所述单元格，以任一所述单元格为目标单元格，对所述目标单元格执行以下处理：
    当所述目标单元格的高度中，位于所述显示范围内的待显示高度大于设定高度，确定所述目标单元格为所述可见单元格。
  4. 根据权利要求3所述的方法，其中，所述根据所述待显示列表中的单元格的高度和所述高度范围，确定位于所述显示区域的至少一个可见单元格，还包括：
    确定所述目标单元格的下边界高度和上边界高度；所述下边界高度为所述目标单元格的下边界在所述页面中的高度；所述上边界高度为所述目标单元格的上边界在所述页面中的高度；
    根据所述下边界高度、所述上边界高度和所述高度范围，确定所述目标单元格的高度中位于所述显示范围内的待显示高度。
  5. 根据权利要求4所述的方法，其中，所述确定所述目标单元格的下边界高度和上边界高度，包括：
    确定所述目标单元格对应的参考单元格；所述参考单元格在所述待显示列表中的位置影响所述目标单元格在所述待显示列表中的高度；
    将所述目标单元格的高度和所述参考单元格的高度进行叠加，得到所述上边界高度；
    根据所述上边界高度和所述目标单元格的高度，得到所述下边界高度。
  6. 根据权利要求1至5中任一项所述的方法，其中，所述显示所述可见单元格的内容，包 括：
    判断所述至少一个可见单元格中每一所述可见单元格的内容的类型；
    确定所述至少一个可见单元格中，所述类型为视频的至少一个视频单元格；
    对所述至少一个视频单元格的内容进行播放。
  7. 根据权利要求6所述的方法，其中，所述对所述至少一个视频单元格的内容进行播放，包括：
    根据所述至少一个视频单元格的展示顺序，将所述至少一个视频单元格添加至播放队列中；
    根据所述播放队列中所述至少一个视频单元格的顺序，播放所述至少一个视频单元格的内容。
  8. 根据权利要求7所述的方法，其中，所述方法还包括：
    接收针对所述页面的滚动操作；
    基于所述滚动操作，清空所述播放队列。
  9. 一种页面显示装置，所述装置包括：
    第一确定单元，配置为基于页面的滚动量，确定待显示列表中位于显示界面的显示区域的高度范围；所述待显示列表为所述页面中的列表；
    获取单元，配置为获取所述待显示列表中至少一个单元格中每一所述单元格的高度；
    第二确定单元，配置为根据每一所述单元格的高度和所述高度范围，确定位于所述显示区域的可见单元格；
    显示单元，配置为显示所述可见单元格的内容。
  10. 一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器运行所述计算机程序时实现权利要求1至8任一项所述页面显示方法中的步骤。
  11. 一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器运行时，实现权利要求1至8任一项所述的页面显示方法。
PCT/CN2022/097639 2021-06-11 2022-06-08 页面显示方法及装置、设备、存储介质 WO2022257973A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110653420.X 2021-06-11
CN202110653420.XA CN113393294A (zh) 2021-06-11 2021-06-11 一种页面显示方法及装置、设备、存储介质

Publications (1)

Publication Number Publication Date
WO2022257973A1 true WO2022257973A1 (zh) 2022-12-15

Family

ID=77620575

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/097639 WO2022257973A1 (zh) 2021-06-11 2022-06-08 页面显示方法及装置、设备、存储介质

Country Status (2)

Country Link
CN (1) CN113393294A (zh)
WO (1) WO2022257973A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113393294A (zh) * 2021-06-11 2021-09-14 北京沃东天骏信息技术有限公司 一种页面显示方法及装置、设备、存储介质
CN114154090A (zh) * 2021-11-29 2022-03-08 中国平安财产保险股份有限公司 一种内存释放方法、装置、终端及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106844749A (zh) * 2017-02-16 2017-06-13 郑州云海信息技术有限公司 一种页面显示方法及装置
CN107704576A (zh) * 2017-09-30 2018-02-16 厦门海迈科技股份有限公司 数据展示优化方法、装置、终端设备及存储介质
CN108282683A (zh) * 2017-01-05 2018-07-13 腾讯科技（深圳）有限公司 一种视频界面显示方法及装置
US20190391718A1 (en) * 2018-06-26 2019-12-26 Mz Ip Holdings, Llc System and method for managing a scrolling operation
CN113393294A (zh) * 2021-06-11 2021-09-14 北京沃东天骏信息技术有限公司 一种页面显示方法及装置、设备、存储介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2003058816A (ja) * 2001-08-21 2003-02-28 Nippon Soken Holdings:Kk セルの高さ揃え方法および装置，表組ページ作成方法および装置ならびにセルの高さ揃えおよび表組ページ作成のためのプログラム
JP4636814B2 (ja) * 2003-07-03 2011-02-23 株式会社電通国際情報サービス データマッピング装置、データマッピング方法、およびプログラム
US10620816B2 (en) * 2016-10-11 2020-04-14 Salesforce.Com, Inc. System for displaying elements of a scrollable list

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108282683A (zh) * 2017-01-05 2018-07-13 腾讯科技（深圳）有限公司 一种视频界面显示方法及装置
CN106844749A (zh) * 2017-02-16 2017-06-13 郑州云海信息技术有限公司 一种页面显示方法及装置
CN107704576A (zh) * 2017-09-30 2018-02-16 厦门海迈科技股份有限公司 数据展示优化方法、装置、终端设备及存储介质
US20190391718A1 (en) * 2018-06-26 2019-12-26 Mz Ip Holdings, Llc System and method for managing a scrolling operation
CN113393294A (zh) * 2021-06-11 2021-09-14 北京沃东天骏信息技术有限公司 一种页面显示方法及装置、设备、存储介质

Also Published As

Publication number Publication date
CN113393294A (zh) 2021-09-14

Similar Documents

Publication Publication Date Title
WO2022257973A1 (zh) 页面显示方法及装置、设备、存储介质
NL2008222C2 (en) Selective rendering of off-screen content.
US10740945B2 (en) Animation control methods and systems
US9756140B2 (en) Tracking user behavior relative to a network page
US8949739B2 (en) Creating and maintaining images of browsed documents
US10474735B2 (en) Dynamic zooming of content with overlays
US20100205520A1 (en) Grid presentation in web-based spreadsheet services
RU2632128C1 (ru) Способ и система загрузки фрагментов изображения на клиентское устройство
US20150248722A1 (en) Web based interactive multimedia system
US20060197782A1 (en) Method and system for zooming in and out of paginated content
US20090132956A1 (en) Tree widget data population
TW200844838A (en) Adaptive server-based layout of web documents
WO2014124417A1 (en) Comprehensive measurement of the opportunity to see online advertisements
US10055388B2 (en) Declarative style rules for default touch behaviors
CN107295415B (zh) 视频播放方法和装置
US8332284B1 (en) Providing multiple views for an item
US9003309B1 (en) Method and apparatus for customizing content displayed on a display device
RU2632150C1 (ru) Способ и система загрузки фрагментов изображения на клиентское устройство
WO2015180448A1 (zh) 移动终端播放方式切换方法、装置、存储介质和程序
WO2016192546A1 (zh) 一种动态曲线的数据点更新方法和设备
CN112417340B (zh) 网页图片处理方法、计算机设备和存储介质
CN113032073A (zh) 一种基于操作行为的页面展示方法和装置
CN109948084A (zh) 网页信息的展示方法、装置、介质及计算设备
US20220179532A1 (en) Method and device for responding to user operation
US10366407B2 (en) Information processing device, information processing method, non-transitory computer readable storage medium, and distribution device

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22819570

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 26.03.2024)