Dans le développement front-end, les bannières sont un composant essentiel. Cet article explique comment implémenter des bannières rotatives dans les Mini Programmes WeChat, qui diffèrent des applications web traditionnelles par l'absence d'un DOM explicite.

1. Préparation

Vous aurez besoin d'au moins deux images pour constituer la bannière. Supposons que ces images soient nommées image1.jpg et image2.jpg et qu'elles se trouvent dans un dossier images.

2. Code WXML (Structure)

Les Mini Programmes WeChat fournissent le composant <swiper> pour créer des carrousels. Ce composant offre plusieurs propriétés pour personnaliser le comportement et l'apparence.

Pour garder le code WXML propre et gérer dynamiquement les images, nous utiliserons une boucle wx:for. Les configurations telles que les points indicateurs et la lecture automatique seront gérées via des liaisons de données bidiretcionnelles avec le fichier JavaScript.

<swiper indicator-dots="{{showIndicators}}" 
           autoplay="{{autoPlay}}" 
           interval="{{slideInterval}}" 
           duration="{{slideDuration}}" 
           circular="true"
           class="banner-swiper">
   <block wx:for="{{imageSources}}" wx:key="*this">
       <swiper-item>
           <image src="{{item}}" class="banner-image" />
       </swiper-item>
   </block>
</swiper>

3. Configuration JavaScript

Dans le fichier JavaScript de la page, nous définissons les données nécessaires. Étant donné que nous utilisons deux images (image1.jpg et image2.jpg), nous pouvons soit les ajouter directement à un tableau, soit générer dynamiquement les chemins d'accès. Il est crucial d'utiliser this.setData() pour appliquer les changements.

Page({
 data: {
   imageSources: [], // Tableau pour stocker les chemins des images
   showIndicators: true, // Afficher les points indicateurs
   autoPlay: true, // Activer la lecture automatique
   slideInterval: 2500, // Délai entre chaque diapositive en millisecondes
   slideDuration: 800, // Durée de la transition en millisecondes
 },

 onLoad: function (options) {
   // Construire dynamiquement les chemins des images
   const images = [];
   for (let i = 1; i <= 2; i++) {
     images.push(`../../images/image${i}.jpg`); // Ajustez le chemin si nécessaire
   }

   // Mettre à jour les sources d'images dans les données de la page
   this.setData({
     imageSources: images
   });
 },

 // ... autres fonctions du cycle de vie de la page ...
})

Pour une gestion plus avancée du style, vous pouvez ajouter des règles CSS dans le fichier WXSS correspondant.

/* styles.wxss */
.banner-swiper {
 height: 150px; /* Ajustez la hauteur selon vos besoins */
 width: 100%;
}

.banner-image {
 width: 100%;
 height: 100%;
 display: block; /* Pour éviter tout espace blanc supplémentaire */
}

Après avoir implémenté ces étapes, vous devriez voir un carrousel de bannières fonctionnel sur votre page de Mini Programme WeChat.