Eine kurze Analyse des Bild-Tags und der Swiper-Komponente beim Lernen von Miniprogrammen

Dieser Artikel führt Sie durch die Image-Tag- und Swiper-Karussell-Komponente im Miniprogramm. Ich hoffe, er wird Ihnen hilfreich sein!

1. Bild-Tag Bild-Tag

1 src

src gibt den Pfad des zu ladenden Bildes an

(1) Das Bild hat eine Standardbreite und -höhe von 320 * 240 . Die ursprüngliche Bildgröße beträgt 100. Füllen Sie das Bildelement.

(2) AspectFit behält das Seitenverhältnis bei, um sicherzustellen, dass die lange Seite des Bildes angezeigt wird. (3) AspectFill behält das Seitenverhältnis bei, um es zu skalieren das Bild und stellt nur sicher, dass die kurze Seite des Bildes vollständig angezeigt werden kann. Verwenden Sie weniger (4) widthFix. Bei Bildern auf der vorherigen Seite wird die Höhe häufig proportional angepasst. . Ähnlich wie bei der vorherigen Hintergrundposition

[Verwandte Lernempfehlungen:

Mini-Programmentwicklungs-Tutorial

]

3 Lazy-Load

Die Bilder im Mini-Programm unterstützen Lazy-LoadLazy-Load direkt beurteilt selbst, wann das Bild innerhalb der Höhe der drei Bildschirme oberhalb und unterhalb des Ansichtsfensters I erscheint, und beginnt mit dem Laden des Bildes. Sie können auch mit dem Finger nach links oder rechts wischen.

1 Swiper

Karusselldiagramm-Außencontainer-Swiper

2 Swiper-Element

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

Jedes Karussell-Element-Swiper-Element

3 Swiper-Label hat einen Standardstil

(1 )Breite 100 %

(2)Höhe 150pxBild hat eine Standardbreite und -höhe von 320240

(3)*Swiper-Höhe kann nicht um den Inhalt erweitert werden

4 Ermitteln Sie zunächst die Breite und Höhe des Originalbild Stellen Sie die Breite und Höhe des Swipers im Verhältnis zur Höhe ein. Die Breite und Höhe des Originalbilds beträgt 1125 * 352 px 5 Autoplay

Autoplay automatisches Karussell

6 Intervall

Intervall zum Ändern der Karussellzeit

7 kreisförmige

zirkuläre Verbindung

8 Indikatorpunkte

Indikator-Punkte Anzeige Indikator Paginator Indexer

9 Indikator-Farbe

Indikator-Farbe Indikator's un Ausgewählte Farbe

10 Indikator-aktive-Farbe

Indikator-aktive-Farbe Die Farbe des Indikators wenn ausgewählt

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Bild-Tags und der Swiper-Komponente beim Lernen von Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!