This article will take you through the image tag image tag and swiper carousel component in the mini program. I hope it will be helpful to you!
##1 src
src specifies the path of the image to be loaded (1) The image has a default width and height of 320 * 240. The original image size is 200 * 1002 mode
mode determines how the image content adapts to the width and height of the image label(1) scaleToFill The default value does not maintain the aspect ratio of the image, so that the width and height of the image Completely stretched to fill the image element (2) aspectFit maintains the aspect ratio to ensure that the long side of the image is displayed Commonly used in page carousel images (3) aspectFill maintains the aspect ratio to scale the image, Only ensure that the short side of the image is fully displayed. Use less (4) widthFix. After the width of the previous web pictures is specified, the height will be adjusted proportionally. Commonly used 5 bottom. . Similar to the previous backgroud-position[Related learning recommendations:小program development tutorial]
3 lazy-load
The pictures in the mini program directly support lazy loading. lazy-loadlazy-load will judge by itself when the picture appears within the height of the three screens above and below the viewport I and start loading. Picture 2. The swiper carousel componentswiper is a container that wraps the carousel, and the child elements inside must be
swiper-itemComponents.
swiperCan automatically carousel sub-elements, and has built-in indicator points, and you can also use your fingers to slide left and right.
1 swiper
Carousel chart outer container swiper2 swiper-item
Each carousel item swiper-item3 The swiper tag has a default style
( 1)width 100%(2)height 150pximage has default width and height 320240
(3)*swiper height cannot be stretched by content
4 First find out the width and height of the original image in equal proportions and set the width and height for swiper
The width and height of the original image are 1125 * 352 pxswiper width/swiper height=width of original image/height of original imageswiper height=swiper width*height of original image/width of original imageheight: 10ovw * 352 /1125##5 autoplay##autoplay automatic rotation
6 intervalinterval to modify the carousel time
7 circularcircular connection carousel
8 indicator-dotsindicator-dotsdisplay indicator pager indexer
9 indicator-colorindicator-colorThe unselected color of the indicator
10 indicator-active-colorindicator-active-colorThe color of the indicator when selected
For more programming-related knowledge, please visit:Introduction to Programming
! !The above is the detailed content of A brief analysis of the image tag and swiper component in mini program learning. For more information, please follow other related articles on the PHP Chinese website!