Comment modifier le contenu coulissant à l'aide de swiper (tutoriel détaillé)

Supposons que l'affichage actuel soit 1, faites glisser un vers la gauche pour diminuer de 1 et faites glisser vers la droite pour augmenter de 1. Ce qui suit est un exemple de code pour vous expliquer la méthode d'implémentation du changement dynamique du contenu coulissant par swiper. Les amis intéressés devraient y jeter un œil

Supposons que l'affichage actuel soit 1, faites glisser un vers la gauche pour diminuer. de 1, et glissez vers la droite pour augmenter de 1

Ajoutez le code suivant sous le corps

<p class="swiper-container temp">
 <p class="swiper-wrapper">
  <p class="swiper-slide">
   1
  </p>
  <p class="swiper-slide">
   2
  </p>
  <p class="swiper-slide">
   3
  </p>
 </p>
</p>

Référencez les scripts css et js de swiper (utilisant actuellement la version 4.x ou ci-dessus)

Ajouter un script js

var now_ActiveIndex=2;//,//当前所在下标
var tempSwiper = new Swiper('.swiper-container.temp', {
 initialSlide: 1,
 loop:true,
 speed:400,
 on: {
  slideChange: function(swiper){//当当前Slide切换时执行(activeIndex发生改变)
   var pre_number=Number($(this.slides[now_ActiveIndex]).text());
   if(now_ActiveIndex>this.activeIndex){
    if(now_ActiveIndex==4&&this.activeIndex==1){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//上一个
     var act_number=pre_number-1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }else if(now_ActiveIndex<this.activeIndex){
    if(now_ActiveIndex==0&&this.activeIndex==3){
     $(this.slides[this.activeIndex]).text(pre_number);
    }else{//下一个
     var act_number=pre_number+1;
     $(this.slides[this.activeIndex]).text(act_number);
    }
   }
   now_ActiveIndex=this.activeIndex;
  },
 },
})

Valeur initiale :

Swipe trois fois vers la gauche :

Swipe une fois vers la droite

Ce test sert principalement à faire glisser le calendrier vers la gauche et la droite pour changer le mois précédent et le suivant mois

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

Articles associés :

Comment revenir à la position initiale de la page d'origine après un saut de page en vue

Comment configurer en utilisant vue-router La méthode de titre de chaque page

Comment résoudre le problème lorsque Vue.js affiche des données, la page clignote

ajax requête+rendu vue.js+ Chargement de la page

Comment utiliser ajax pour rendre la page dans vue.js

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!