In a real case, it is often necessary to show a list of images, but each image in the list will be small due to the large number of images. We need a function that can click on an image to display a large image. Today we will talk about how to achieve this preview effect in IVX.
1. Picture list
The image list in demo is created using the loop component. The image resource is already stored in the object array. The image component under the for container is already bound to the image resource in the current data. The parent container is a line with wrapping turned on, showing two images per line.
This is the small image created by the loop above, and we also need a large image component to display the large image we clicked on. A banner is used to place the larger image. (The banner has two types of px icon inside the banner is absolute positioning, % icon inside the banner is relative positioning)
The initial width of the large image is 242 and the scale is 2, so the initial width of the large image is now 484. But when we change one of the variables the width of the larger image changes, in this case the scale.
Implementing a case requires two things, skillful use of tools and clear case logic. Skillful use of IVX requires more research, more documents, more importantly, more hands-on to do to try. The case logic is that we need to know what we want to do and design the steps of each step. For example, in this case, the picture resource is put into the object array >>>for loop to create a display small picture >>> Small picture add click event to make the big picture show >>> Change the width and height of the big picture by the wheel >>> Big picture add click event to make the big picture hide. Only by having a clear understanding of what we want to do can we achieve it step by step.