Shulou(Shulou.com)06/02 Report--

This article mainly shows you the "Mini Program image tags, swiper components how to use", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "Mini Program image tags, swiper components how to use" this article.

1. Image tag picture tag

1 src

Src specifies the path of the picture to be loaded

(1) the default width and height of the image is 320 * 240. The original image size is 200 * 100.

2 mode

Mode determines how the content of the picture adapts to the width and height of the picture tag.

(1) the default value of scaleToFill does not maintain the aspect ratio to scale the picture, so that the width and height of the picture are fully stretched to fill the image element.

(2) aspectFit maintains the aspect ratio to ensure that the long edge of the picture is displayed and the webcast picture is commonly used.

(3) aspectFill maintains the aspect ratio to scale the picture, only ensuring that the short edge of the picture can be fully displayed. Use less

(4) widthFix before the width of the web picture specified after the height of its own proportion to adjust the commonly used 5 bottom. Similar to the previous backgroud-position

3 lazy-load

The images in Mini Program directly support lazy loading of lazy-load.

Lazy-load will judge for himself that when the picture appears within the height of three screens above and below the viewport Ⅰ, it starts to load the picture.

2. Swiper broadcast picture component

Swiper is a container that wraps a broadcast graph, and the child elements in it must be swiper-item components. Swiper can automatically broadcast sub-elements, and is born with pointer points, but also can use the fingers to slide left and right.

1 swiper

Outer container swiper of the carousel image

2 swiper-item

Swiper-item for each rotation item

3 there is a default style for swiper tags

(1) width 100%

(2) the default width and height of height 150pximage are 320240.

(3) * swiper height cannot be supported by content

4 first find out the width and height of the original drawing in equal proportion to set the width and height of the swiper

Width and height of the original image 1125 * 352px

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 modifies the rotation time

7 circular

Circular connection rotation

8 indicator-dots

Indicator-dots display indicator paging indexer

9 indicator-color

Unselected color of the indicator-color indicator

10 indicator-active-color

The color of the indicator when indicator-active-color is selected

These are all the contents of this article entitled "how to use image tags and swiper components in Mini Program". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.