Step S12: rendering a sub-picture sequence for the ScrollView component, rendering a brother container View of the ScrollView component, and taking the brother container View as a small dot sequence and a carrier of the page number, wherein the sub-picture sequence is obtained by arranging the pictures to be displayed according to the sequence of the page number, the width of each frame of picture in the sub-picture sequence is the width of an actual display area, the width of the actual display area is determined based on the width of a display interface of the current device and the outer edge distance of the display interface of the current device, and the small dot sequence is used for representing the position of the current display picture in the sub-picture sequence.

In practical application, a sub-picture sequence needs to be rendered for the ScrollView component, that is, when the sliding direction is a horizontal direction relative to a user, the pictures to be displayed are arranged in a row according to the sequence of page numbers so as to be displayed in sequence, the width of each frame of picture in the sub-picture sequence is the width of an actual display area, the width of the actual display area is determined based on the width of a display interface of a current device and the outer edge distance of the display interface of the current device, the width of the display interface of the current device is also the screen width of the current device, that is, the outer edge distance can be set on the display interface of the current device.

Specifically, the rendering of the sub-picture sequence by the ScrollView component includes: rendering a sub-picture sequence for the ScrollView component; and setting the width of each frame of picture in the sub-picture sequence as the width of an actual display area. Before setting the width of each frame of picture in the sub-picture sequence as the width of an actual display area, the method further includes: determining the sum of the outer distances of the current equipment display interface; and taking the difference value of the width of the display interface of the current equipment and the sum of the outer margins as the width of the actual display area.

Rendering a sibling container View of the ScrollView component is further required so as to use a small dot sequence and the carrier of the page number, wherein the small dot sequence is used for representing the position of the current display picture in the sub-picture sequence. When the sliding direction is horizontal relative to a user, the number of small dots of the small dot sequence is the same as the number of pictures in the sub-picture sequence and is arranged in a row, when the current display picture is the first picture of the sub-picture sequence, the first small dot in the small dot sequence is selected to indicate that the current display picture is the first picture, and when the current display picture is the second picture in the sub-picture sequence, the second small dot in the small dot sequence is selected to indicate that the current display picture is the second picture.

Step S13: and mounting the ScrollView component, starting a timer, and moving the pictures in the sub-picture sequence by the width of the actual display area along a preset direction if a sliding instruction triggered by a user dragging behavior is not detected every time the timer reaches a preset time so as to sequentially display the pictures to be displayed in the sub-picture sequence in a carousel manner.

And then mounting the ScrollView component, starting a timer, so that when the timer reaches preset time each time, if a sliding instruction triggered by a user dragging behavior is not detected, moving the pictures in the sub-picture sequence by the width of the actual display area along a preset direction, and performing carousel display on the pictures to be displayed in the sub-picture sequence in sequence. Wherein the preset direction is a preset sliding direction. The preset direction may be to the left or right of the current device with respect to the user.

The total distance of movement of the currently displayed picture is the product of the page number of the currently displayed picture and the width of the actual display area. Referring to fig. 2, the page number is denoted by P, the sub-picture sequence includes pages P1, P2, and P3, the outer margin is MG, the width of the current device display interface (i.e., the screen width) is SW, the width of the actual display area is AW = (SW-MG = 2), the actual carousel width is AW, and the total sliding distance of the current display picture is HD, HD = P × AW = P (SW-MG = 2). P2 slides leftwards by the width of 2 AW, P3 follows the P2 to slide to supplement the position sliding distance to be 3 AW, and the page after the outer margin is set is normally slid by analogy without calculation error to cause page carousel diagram display dislocation.

As can be seen, in the present application, a resource to be displayed in a carousel View is initialized, a sliding device with a ScrollView component as a parent container is rendered, wherein the resource to be displayed includes a picture to be displayed and a page number of the picture to be displayed, a sub-picture sequence is rendered for the ScrollView component, a sibling container View of the ScrollView component is rendered, the sibling container View is used as a carrier of a small dot sequence and the page number, wherein the sub-picture sequence is obtained by arranging the picture to be displayed according to a sequence of the page number, a width of each frame of the sub-picture sequence is a width of an actual display area, the width of the actual display area is determined based on a width of a current device display interface and an outer edge distance of a current device display interface, the small dot sequence is used for indicating a position of the current display picture in the sub-picture sequence, then the ScrollView component is hung, and a timer is started, and when the timer reaches a preset time, if a user does not detect a dragging behavior, a sliding command is triggered, the sliding device moves the sub-picture sequence along a display direction of the sub-picture to be displayed in the actual display area, and the display area is set in the display order of the sub-picture sequence. Therefore, when the sprite sequence is rendered for the ScrollView component, the width of each frame of picture in the sprite sequence is set as the width of an actual display area, the width of the actual display area is determined based on the width of the display interface of the current device and the outer edge distance of the display interface of the current device, and then after the ScrollView component is mounted and the timer is started, if a sliding instruction triggered by a user dragging behavior is not detected every time the timer reaches a preset time, the pictures in the sprite sequence are moved by the width of the actual display area along a preset direction so as to sequentially display the pictures to be displayed in the sprite sequence in a carousel manner. Compared with the prior art, the width of the current equipment display interface is set when the current equipment display interface leaves the factory and cannot be changed, so that the picture display width cannot be changed, the width of each frame of picture is the width of an actual display area, the moving distance of the timer reaching the preset time along the preset direction is the width of the actual display area, the problem of carousel error caused by the fact that the outside margin is set during carousel picture display can be solved, and user experience is improved.

Referring to fig. 3, an embodiment of the present application discloses a specific carousel map display method, including:

step S21: initializing resources to be displayed in a carousel graph, and rendering a sliding device which takes a ScrollView component as a parent container, wherein the resources to be displayed comprise pictures to be displayed and page numbers of the pictures to be displayed.

Step S22: rendering a sub-picture sequence for the ScrollView component, rendering a brother container View of the ScrollView component, and taking the brother container View as a small dot sequence and a carrier of the page number, wherein the sub-picture sequence is obtained by arranging the pictures to be displayed according to the sequence of the page number, the width of each frame of picture in the sub-picture sequence is the width of an actual display area, the width of the actual display area is determined based on the width of a display interface of the current device and the outer edge distance of the display interface of the current device, and the small dot sequence is used for representing the position of the current display picture in the sub-picture sequence.

The specific implementation process of step S21 and step S22 may refer to the content disclosed in the foregoing embodiments, and details are not repeated here.

Step S23: and mounting the ScrollView component, starting a timer, and moving the pictures in the sub-picture sequence by the width of the actual display area along a preset direction if a sliding instruction triggered by a user dragging behavior is not detected every time the timer reaches a preset time so as to sequentially display the pictures to be displayed in the sub-picture sequence in a carousel manner.

And the ScrollView component is also required to be mounted, a timer is started, and when the timer reaches preset time each time, if a sliding instruction triggered by a user dragging behavior is not detected, the pictures in the sub-picture sequence are moved by the width of the actual display area along a preset direction, so that the pictures to be displayed in the sub-picture sequence are sequentially displayed in a carousel mode.

After moving the pictures in the sub-picture sequence by the width of the actual display area along a preset direction, the method further comprises the following steps: updating the small dot sequence according to the page number of the current display picture; and updating the page number of the current display picture to the state machine.

Step S24: and mounting the ScrollView component, starting a timer, clearing the timer if a sliding instruction triggered by a user dragging behavior is detected, and sliding to a target picture to be displayed in the sub-picture sequence according to the sliding instruction so as to take the target picture to be displayed as a current display picture.

And after the timer is started, if a sliding instruction triggered by a user dragging behavior is detected, the timer is cleared, and the target picture to be displayed in the sub-picture sequence is slid according to the sliding instruction so as to take the target picture to be displayed as the current display picture. The target picture is also a picture that the user wants to drag, that is, a picture that the user wants to see.

Step S25: and updating the small dot sequence according to the page number of the current display picture when the picture to be displayed is slid by one frame, and updating the page number of the current display picture to the state machine.

And in the process of sliding to the target picture, updating the small dot sequence according to the page number of the current display picture when the picture to be displayed is slid every time, and updating the page number of the current display picture to a state machine.

Step S26: and when the user dragging behavior is finished, restarting the timer so as to perform automatic carousel display on the to-be-displayed picture in the sub-picture sequence.

And when the user dragging behavior is finished, restarting the timer so as to automatically and alternately display the to-be-displayed pictures in the sub-picture sequence.

Referring to fig. 4, an embodiment of the present application discloses a carousel map display device, including:

the system comprises aninitialization module 11, a display module and a display module, wherein theinitialization module 11 is used for initializing resources to be displayed in a carousel image and rendering a sliding device which takes a ScrollView component as a parent container, and the resources to be displayed comprise pictures to be displayed and page numbers of the pictures to be displayed;

arendering module 12, configured to render a sub-picture sequence for the ScrollView component, render a sibling container View of the ScrollView component, and use the sibling container View as a carrier of a small circle sequence and the page number, where the sub-picture sequence is obtained by arranging the pictures to be displayed according to the order of the page number, a width of each frame of picture in the sub-picture sequence is a width of an actual display area, the width of the actual display area is determined based on a width of a display interface of a current device and an outer edge distance of the display interface of the current device, and the small circle sequence is used to represent a position of the current display picture in the sub-picture sequence;

and thecarousel module 13 is configured to mount the ScrollView component, start a timer, and move the pictures in the sub-picture sequence by the width of the actual display area along a preset direction if a sliding instruction triggered by a user dragging behavior is not detected every time the timer reaches a preset time, so as to sequentially carousel and display the pictures to be displayed in the sub-picture sequence.

In some specific implementations, theinitialization module 11 is configured to:

setting a preset value as a handle of the ScrollView component;

and acquiring the handle, and setting the attribute of the ScrollView component.

In some specific implementations, theinitialization module 11 is configured to:

setting a horizontal attribute of the ScrollView component as a carousel map to slide transversely;

In some specific implementations, thecarousel module 13 is further configured to:

if a sliding instruction triggered by the user dragging behavior is detected, clearing the timer, and sliding to a target to-be-displayed picture in the sub-picture sequence according to the sliding instruction so as to take the target to-be-displayed picture as a current display picture;

In some specific implementations, therendering module 12 is configured to:

rendering a sub-picture sequence for the ScrollView component;

In some specific implementations, therendering module 12 is configured to:

determining the sum of the outer distances of the current equipment display interface;

and taking the difference value of the width of the display interface of the current equipment and the sum of the outer margins as the width of the actual display area.

Referring to fig. 5, a schematic structural diagram of anelectronic device 20 provided in the embodiment of the present application is shown, where theelectronic device 20 may specifically implement the steps of the carousel map displaying method described above.

In general, theelectronic device 20 in the present embodiment includes: aprocessor 21 and a memory 22.

Theprocessor 21 may include one or more processing cores, such as a four-core processor, an eight-core processor, and so on. Theprocessor 21 may be implemented by at least one hardware component selected from a DSP (digital signal processing), an FPGA (field-programmable gate array), and a PLA (programmable logic array). Theprocessor 21 may also include a main processor and a coprocessor, where the main processor is a processor for processing data in an awake state, and is also called a Central Processing Unit (CPU); a coprocessor is a low power processor for processing data in a standby state. In some embodiments, theprocessor 21 may be integrated with a GPU (graphics processing unit) which is responsible for rendering and drawing images that need to be displayed on the display screen. In some embodiments, theprocessor 21 may include an AI (artificial intelligence) processor for processing a calculation operation related to machine learning.

Memory 22 may include one or more computer-readable storage media, which may be non-transitory. Memory 22 may also include high speed random access memory, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In this embodiment, the memory 22 is at least used for storing the following computer program 221, wherein after being loaded and executed by theprocessor 21, the steps of the carousel graph displaying method disclosed in any one of the foregoing embodiments can be implemented.

In some embodiments, theelectronic device 20 may further include a display 23, an input/output interface 24, acommunication interface 25, a sensor 26, a power supply 27, and a communication bus 28.

Those skilled in the art will appreciate that the configuration shown in FIG. 5 is not limiting ofelectronic device 20 and may include more or fewer components than those shown.

Further, an embodiment of the present application also discloses a computer-readable storage medium for storing a computer program, where the computer program is executed by a processor to implement the carousel map display method disclosed in any of the foregoing embodiments.

The specific process of the carousel map display method may refer to corresponding content disclosed in the foregoing embodiments, and is not described herein again.

In the present specification, the embodiments are described in a progressive manner, and each embodiment focuses on differences from other embodiments, and the same or similar parts between the embodiments are referred to each other. The device disclosed by the embodiment corresponds to the method disclosed by the embodiment, so that the description is simple, and the relevant points can be referred to the method part for description.

The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. A software module may reside in Random Access Memory (RAM), memory, read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

Finally, it is further noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of other elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrases "comprising a," "8230," "8230," or "comprising" does not exclude the presence of additional like elements in a process, method, article, or apparatus that comprises the element.

The carousel map display method, apparatus, device and medium provided by the present application are described in detail above, and specific examples are applied in the present application to explain the principles and embodiments of the present application, and the description of the above embodiments is only used to help understand the method and core ideas of the present application; meanwhile, for a person skilled in the art, according to the idea of the present application, the specific implementation manner and the application scope may be changed, and in summary, the content of the present specification should not be construed as a limitation to the present application.

Claims

1. A carousel graph display method is characterized by comprising the following steps:

initializing resources to be displayed in a carousel graph, and rendering a sliding device which takes a ScrollView component as a parent container, wherein the resources to be displayed comprise pictures to be displayed and page numbers of the pictures to be displayed;

mounting the ScrollView component, starting a timer, and moving the picture in the sub-picture sequence by the width of the actual display area along a preset direction if a sliding instruction triggered by a user dragging behavior is not detected every time the timer reaches a preset time so as to sequentially display the pictures to be displayed in the sub-picture sequence in a carousel manner;

the sliding device for rendering the parent container by using the ScrollView component comprises:

setting a preset value as a handle of the ScrollView component;

2. A carousel view presentation method according to claim 1, wherein the setting of the attribute of the scrillview component comprises:

3. The carousel map displaying method according to claim 1, wherein after moving the pictures in the sub-picture sequence by the width of the actual display area along a preset direction, the method further comprises:

4. A carousel map displaying method according to claim 1, further comprising:

updating the small dot sequence according to the page number of the current display picture and updating the page number of the current display picture to a state machine when the picture to be displayed is slid by one frame;

and when the user dragging behavior is finished, restarting the timer so as to enable the picture to be displayed in the sub-picture sequence to be displayed in an automatic carousel mode.

5. The carousel map displaying method according to any one of claims 1 to 4, wherein the rendering the sequence of sub-pictures for the ScrollView component comprises:

rendering a sub-picture sequence for the ScrollView component;

6. The carousel image displaying method according to claim 5, wherein before setting the width of each frame of picture in the sub-picture sequence to be the width of an actual display area, the method further comprises:

7. A carousel picture display device, comprising:

the device comprises an initialization module and a display module, wherein the initialization module is used for initializing resources to be displayed in a carousel image and rendering a sliding device which takes a ScrollView component as a parent container, and the resources to be displayed comprise pictures to be displayed and page numbers of the pictures to be displayed; the sliding device for rendering the parent container by using the ScrollView component comprises: setting a preset value as a handle of the ScrollView component; acquiring the handle, and setting the attribute of the ScrollView component;

a rendering module, configured to render a sub-picture sequence for the ScrollView component, render a sibling container View of the ScrollView component, and use the sibling container View as a carrier of a small dot sequence and the page number, where the sub-picture sequence is obtained by arranging the pictures to be displayed according to a sequence of the page number, a width of each frame of the picture in the sub-picture sequence is a width of an actual display area, the width of the actual display area is determined based on a width of a display interface of a current device and an outer edge distance of the display interface of the current device, and the small dot sequence is used to represent a position of the current display picture in the sub-picture sequence;

8. An electronic device, comprising:

a memory and a processor;

wherein the memory is used for storing a computer program;

the processor is configured to execute the computer program to implement the carousel map display method according to any one of claims 1 to 6.

9. A computer-readable storage medium for storing a computer program, wherein the computer program is configured to implement the carousel map presentation method according to any one of claims 1 to 6 when executed by a processor.