Tutoriel sur la mise en œuvre de la fonction de commutation de carrousel d'images à l'aide du composant swiper WeChat Xiaocheng-Développement de mini-programmes-php.cn

Tutoriel sur la mise en œuvre de la fonction de commutation de carrousel d'images à l'aide du composant swiper WeChat Xiaocheng

小云云

Libérer： 2017-12-13 09:35:13

original

3427 Les gens l'ont consulté

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, et implique l'utilisation des attributs associés du composant swiper. J'espère que cela pourra aider tout le monde.

1. Affichage des effets

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>

Copier après la connexion

la description de l'attribut du composant swiper est la suivante :

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	Couleur	#000000	Point indicateur actuellement sélectionné Couleur	1.1.0
lecture automatique	Booléen	false	S'il faut basculer automatiquement
actuel	Numéro	0	index de la page courante
intervalle	Numéro	5000	Intervalle de commutation automatique
durée	Nombre	500	Durée de l'animation coulissante
circulaire	Booléen	faux	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 les changements actuels, event.detail = { actuel : actuel, source : source}