A brief analysis of the image tag and swiper component in mini program learning

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. Image tag Image tag

##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 * 100

2 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-load

lazy-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 component

swiperis a container that wraps the carousel, and the child elements inside must beswiper-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 swiper

2 swiper-item

Each carousel item swiper-item

3 The swiper tag has a default style

（ 1)width 100%

(2)height 150pximage has default width and height 320

240

(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 px

swiper width/swiper height=width of original image/height of original image

swiper height=swiper width*height of original image/width of original image

height: 10ovw * 352 /1125

##5 autoplay##autoplay automatic rotation

6 interval

interval to modify the carousel time

7 circular

circular connection carousel

8 indicator-dots

indicator-dotsdisplay indicator pager indexer

9 indicator-color

indicator-colorThe unselected color of the indicator

10 indicator-active-color

indicator-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!