So verwenden Sie die Swiper-Komponente zum Umschalten der Bildanzeige im WeChat Mini-Programm

In diesem Artikel wird hauptsächlich die Verwendung der Swiper-Komponente durch WeChat Xiaocheng zur Implementierung der Bildkarussell-Umschaltanzeigefunktion vorgestellt, die die Verwendung verwandter Attribute der Swiper-Komponente umfasst, und wird mit Quellcode geliefert, den Leser bei Bedarf herunterladen und darauf verweisen können es kann darauf verweisen

Das Beispiel in diesem Artikel beschreibt, wie WeChat Xiaocheng die Swiper-Komponente verwendet, um die Bildkarussell-Umschaltanzeigefunktion zu implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Schlüsselcode

index.wxml:

<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;">
 <swiper-item>
 <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/>
 </swiper-item>
</swiper>

Die Beschreibung des Swiper-Komponentenattributs lautet wie folgt:

Attributname	Typ	Standardwert	Beschreibung	Mindestversion
indicator-dots	Boolean	false	Ob Anzeigepunkte des Bedienfelds angezeigt werden sollen
Indikatorfarbe	Farbe	rgba(0, 0, 0, .3)	Indikatorfarbe	1.1.0
Indikator-aktive-Farbe	Farbe	#000000	Die Farbe des aktuell ausgewählten Indikatorpunkts	1.1.0
Autoplay	Boolean	false	Ob automatisch umgeschaltet werden soll
aktuell	Nummer	0	Der Index der aktuellen Seite
Intervall	Anzahl	5000	Automatisches Umschaltintervall
Dauer	Anzahl	500	Gleitende Animationsdauer
kreisförmig	Boolean	false	Ob Verbindungsgleiten verwendet werden soll
vertikal	Boolean	false	Ob die Schieberichtung Hochformat ist
bindchange	EventHandle		Das Änderungsereignis wird ausgelöst, wenn sich aktuelle Änderungen ändern, event.detail = {current: current, source: source}

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Tipps zur Verwendung von ES6/JavaScript (ausführliches Tutorial)

So crawlen Sie Website-Bilder in NodeJS

Über das abstrakte JS-Factory-Muster (ausführliches Tutorial)

So lösen Sie den Konflikt zwischen Django- und Vue-Syntax

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Swiper-Komponente zum Umschalten der Bildanzeige im WeChat Mini-Programm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!