Comment utiliser le composant swiper pour changer l'affichage de l'image dans le mini programme WeChat

Cet article présente principalement l'utilisation par WeChat Xiaocheng du composant swiper pour implémenter la fonction d'affichage de commutation du carrousel d'images, impliquant l'utilisation d'attributs associés du composant swiper, et est livré avec le code source que les lecteurs peuvent télécharger pour référence. reportez-vous à lui

L'exemple de cet article décrit comment WeChat Xiaocheng utilise le composant swiper pour implémenter la fonction d'affichage de commutation du carrousel d'images. Partagez-le avec tout le monde pour référence, comme suit :

Code clé

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>

La description de l'attribut du composant Swiper est la suivante suit :

Nom de l'attribut	Type	Valeur par défaut	Description	Version minimale
indicateur-points	Booléen	false	S'il faut afficher les points indicateurs du panneau
couleur de l'indicateur	Couleur	rgba(0, 0, 0, .3)	Couleur de l'indicateur	1.1.0
indicator-active-color	Color	#000000	La couleur du point indicateur actuellement sélectionné	1.1.0
lecture automatique	Booléen	false	S'il faut basculer automatiquement
actuel	Numéro	0	L'index de la page actuelle
intervalle	Nombre	5000	Intervalle de commutation automatique
durée	Nombre	500	Durée de l'animation coulissante
circulaire	Booléen	false	S'il faut utiliser le glissement de connexion
vertical	Booléen	false	Si la direction de glissement est portrait
bindchange	EventHandle		L'événement de changement sera déclenché lorsque le courant change, event.detail = {current: current, source: source}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Conseils sur l'utilisation d'ES6/JavaScript (tutoriel détaillé)

Comment explorer les images de sites Web dans nodejs

À propos du modèle de fabrique abstraite JS (tutoriel détaillé)

Comment résoudre le conflit entre la syntaxe Django et Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!