Découvrez comment utiliser différentes méthodes de mise en page pour implémenter les composants Swiper

Avec la popularité des appareils mobiles et les exigences croissantes des utilisateurs en matière d'expériences interactives, les carrousels sont devenus un composant courant dans de nombreuses applications mobiles et sites Web. Dans Uniapp, le composant Swiper peut nous aider à implémenter rapidement la fonction carrousel. Cependant, la méthode de mise en page par défaut de Swiper peut ne pas répondre à nos besoins. Cet article explorera comment utiliser différentes méthodes de mise en page pour implémenter les composants Swiper.

1. Disposition par défaut

Tout d'abord, jetons un coup d'œil à la disposition par défaut du composant Swiper. Swiper glisse horizontalement par défaut et occupe toute la largeur du conteneur.

<swiper>
  <swiper-item>
    <image src="./1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./3.jpg"></image>
  </swiper-item>
</swiper>

Dans le code ci-dessus, nous définissons le composant Swiper et les éléments du carrousel via les balises swiper et swiper-item. Étant donné que Swiper glisse horizontalement par défaut, nous n'avons pas besoin de spécifier la largeur de la balise swiper-item. Il nous suffit d'y imbriquer des images ou d'autres éléments et de définir la largeur et la hauteur correspondantes.

2. Disposition verticale

Si nous devons implémenter un Swiper coulissant vertical, nous pouvons le faire en ajoutant l'attribut direction au Swiper :

<swiper direction="vertical">
  <swiper-item>
    <image src="./1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./3.jpg"></image>
  </swiper-item>
</swiper>

#🎜 🎜#De cette façon, Swiper deviendra un slide vertical. Il convient de noter que la hauteur de Swiper-item doit être définie en fonction des besoins réels du moment, et que la largeur de Swiper-item s'adaptera à la largeur de Swiper.

3. Disposition de la pagination

Parfois, nous devons ajouter des indicateurs de pagination dans Swiper. Swiper fournit l'attribut de pagination pour implémenter la mise en page de la pagination :

<swiper :autoplay="true" :interval="3000" pagination>
  <swiper-item>
    <image src="./1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./3.jpg"></image>
  </swiper-item>
</swiper>

De cette façon, un indicateur de pagination sera automatiquement généré sous le composant Swiper. Si vous souhaitez personnaliser le style de l'indicateur de pagination, vous pouvez ajouter la balise pagination-item sous la balise swiper :

<swiper :autoplay="true" :interval="3000" pagination>
  <swiper-item>
    <image src="./1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./3.jpg"></image>
  </swiper-item>
</swiper>

  
  
  

4. Disposition en fondu

En plus de l'horizontal , mises en page verticales et de pagination, Swiper fournit également une mise en page en fondu. La disposition en fondu signifie que lorsque l'élément de carrousel actuel disparaît, l'élément de carrousel suivant apparaît sous la forme d'un fondu entrant. Dans Uniapp, nous pouvons obtenir l'effet de fondu en définissant l'attribut d'effet sur fondu :

<swiper :autoplay="true" :interval="3000" effect="fade">
  <swiper-item>
    <image src="./1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="./3.jpg"></image>
  </swiper-item>
</swiper>

Il convient de noter que la disposition du fondu nécessite au moins deux éléments de carrousel pour afficher l'effet.

5. Mise en page personnalisée

Si aucune des méthodes de mise en page ci-dessus ne peut répondre à nos besoins, nous pouvons également obtenir un effet carrousel spécifique grâce à une mise en page personnalisée. Dans Uniapp, nous pouvons obtenir une mise en page personnalisée en bouclant les balises Swiper-item :

<swiper :autoplay="true" :interval="3000">
  <template v-for="(item, index) in list">
    <swiper-item :key="index">
      <image :src="item.src" :style="{width: item.width + &#39;rpx&#39;, height: item.height + &#39;rpx&#39;}"></image>
    </swiper-item>
  </template>
</swiper>

Dans le code ci-dessus, nous générons un élément Swiper via la boucle d'instructions v-for et transmettons différentes données pour obtenir différentes effets de carrousel. Il convient de noter qu'à ce stade, nous devons spécifier manuellement la largeur et la hauteur de l'élément Swiper, sinon cela pourrait entraîner une disposition chaotique des éléments du carrousel.

Résumé :

En maîtrisant différentes méthodes de mise en page Swiper, nous pouvons facilement réaliser divers effets de carrousel et personnaliser la mise en page en fonction des besoins réels. Lorsque vous utilisez Swiper, vous devez faire attention à la relation entre la largeur et la hauteur de l'élément du carrousel et la taille de Swiper, ainsi qu'à la manière d'utiliser divers attributs. J'espère que cet article pourra aider tout le monde à mieux utiliser les composants Swiper.

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!