미니 프로그램 학습에서 이미지 태그와 스와이퍼 구성 요소에 대한 간략한 분석

이 기사에서는 미니 프로그램의 이미지 태그 이미지 태그와 스위퍼 캐러셀 구성 요소를 안내해 드리겠습니다. 도움이 되셨으면 좋겠습니다.

1. 이미지 태그 이미지 태그

1 src

src는 로드할 이미지의 경로를 지정합니다

(1) 이미지의 기본 너비와 높이는 320 * 240입니다. . 원본 이미지 크기는 100입니다. 이미지 요소를 채웁니다.

(2) 가로 세로 비율을 유지하여 이미지의 긴 쪽이 표시되도록 합니다. 페이지 캐러셀 이미지에서 일반적으로 사용됩니다.(3) 가로 세로 비율을 유지합니다. 이미지의 크기를 조정하고 이미지의 짧은 면만 완전히 표시될 수 있도록 합니다. 덜 사용하세요(4) widthFix 이전 웹의 사진의 경우 너비를 지정한 후 높이가 비례하여 조정됩니다. 5 하단. . 이전 backgroud-position과 비슷합니다

[관련 학습 권장사항:

미니 프로그램 개발 튜토리얼

]

3lazy-load

미니 프로그램의 이미지는 Lazy-load를 직접 지원합니다lazy-load 뷰포트 I 위와 아래의 3개 화면 높이 내에 그림이 나타날 때 자체적으로 판단하고 그림 로드를 시작합니다

2. 스위퍼 캐러셀 구성요소는 자동으로 하위 요소를 캐러셀할 수 있으며 표시기 포인트로 탄생합니다. , 손가락으로 왼쪽이나 오른쪽으로 스와이프할 수도 있습니다.

1 swiper

Carousel 차트 외부 컨테이너 swiper

swiper就是一个包裹轮播图的容器，里面的子元素必须是swiper-item组件。swiper

2 swiper-item각 캐러셀 항목 swiper-item

3 swiper 라벨 기본 스타일이 있습니다(1 )width 100%

(2)height 150pximage의 기본 너비와 높이는 320

240

(3)*스와이프 높이는 콘텐츠에 따라 늘어날 수 없습니다

4 먼저 이미지의 너비와 높이를 알아보세요. 원본 이미지 높이에 비례하여 스와이퍼의 너비와 높이를 설정합니다. 원본 이미지의 너비와 높이는 1125 * 352픽셀입니다. 원본 이미지의 높이/너비

높이: 10ovw * 352

5 자동 재생

자동 재생 자동 캐러셀

6 간격

캐러셀 시간을 수정하는 간격

7원형원형 연결 캐러셀

8개 표시점Indicator-dots 표시 표시기 페이지네이터 indexer

9 Indicator-colorindicator-color 표시기의 un 선택된 색상

10 Indicator-active-colorindicator-active-color 표시기의 색상 선택 시

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 소개

를 방문하세요! !

위 내용은 미니 프로그램 학습에서 이미지 태그와 스와이퍼 구성 요소에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!