1. Introduction
Recently do shop page, need a card – type round broadcast component. Many online are similar to netease cloud ordinary round cast components, explore several or decided to write a component out.
The design of the renderings:
Vertical mode:
Horizontal mode:
Note: The class name of the image and the class name of the selected image can be added by passing in parameters
2. Write ideas
The difficulty to overcome in programming the rotation component is the animation design when switching pictures. Here are my design ideas:
1. There are two div elements:. Image-list and. Virtual-list. . Image-list wraps around. Virtual-list. . Virtual-list wraps the image to be displayed in rotation. Image, as shown below:
Where, the pseudo-code of the width and height figure of the. Image-list element is dynamically generated according to the width and height of the rotation image and margin size.
2. To play a picture in the left wheel, insert a picture that is about to appear. In the figure below, the green square represents the new image being inserted, and the right side of the. Virtual-list overflows.
3. Move the. Virtual-list one image to the left. But because. Image-list overflow is set to hidden. Therefore, the overflow portion of the virtual-list is not displayed. At this point, the virtual-list will look the same in the browser rendering as if the new image was not inserted.
4. After the animation in the preceding steps, delete the image element that overflows to the right of the virtual-list. At this point, the rotation action process is complete.
3. Component instructions
I won’t post the code, it’s only 300 lines. Want to call directly to my Github url to copy the imagecarousel. vue component and img folder (the icon used to toggle buttons) can be packaged as vUE components, so through vue import use. The parameters and events involved are as follows:
Parameters of the Attributes
| parameter | instructions | type | An optional value | The default value | Whether must |
|---|---|---|---|---|---|
| images | Pictures to show | {Array<String>} |
– | – | is |
| show-size | The number of carousel charts | Number |
– | 3 | no |
| image-class | The name of the class added to the multicast graph | String |
– | – | no |
| image-active-class | The name of the class that is added when a multicast graph is selected | String |
– | – | no |
| auto-slide | Whether automatic rotation | Boolean |
– | false | no |
| auto-slide-interval | When auto rotation is enabled, the time interval for switching pictures is changed | Number |
– | 3000 | no |
| mode | Select the display mode, including horizontal mode and vertical mode | String |
horizontal/vertical | horizontal | no |
| slide-time | The event that toggles the animation during the picture | Number |
– | 300 | no |
Events Events
| The event type | instructions | The callback parameter |
|---|---|---|
| autoslide-image | Event that is triggered each time a picture is switched when auto rotation is enabled | The url of the image in rotation |
| click-image | The event that is triggered when an image is clicked | The URL of the clicked image |