La solution au problème de l'utilisation de Swiper dans AngularJS pour créer une carte de défilement qui ne peut pas glisser

Swiper est actuellement un plug-in coulissant tactile mobile populaire. Parce qu'il est simple, facile à utiliser et facile à utiliser, il est bien accueilli par de nombreux développeurs front-end.

J'ai rencontré ce problème aujourd'hui lors de l'utilisation de Swiper :

Utilisez la boucle dynamique angulaire js pour générer la classe swiper-slide et générez plus de 6 pages coulissantes dans swiper-wrapper, mais cela peut tout simplement' t être dessiné Allez sur la deuxième page et essayez de modifier la valeur de longSwipesRatio au minimum, mais cela ne fonctionne toujours pas.

<div class="swiper-wrapper" >
<!-- =======循环部分======= -->
<div class="swiper-slide" ng-repeat="result in mediaList">
//此处为一个滑动页内容
</div> 
<!-- ============== -->
</div>
</div>

Lors des tests, il a été constaté qu'en copiant manuellement n parties de boucle, n blocs peuvent être glissés après avoir ajusté manuellement la taille de la fenêtre afin que la page du document change (réponse dynamique), elle peut glisser normalement ; .

Donc, je suppose que le mécanisme de swiper est le suivant : lors de l'initialisation, il analyse automatiquement le nombre de blocs de classe swiper-slide qu'il y a sous la classe swiper-wrapper, puis combien de blocs sont autorisés à glisser. Dans Angular, il est toujours défini après l'initialisation du swiper, et le swiper ne peut pas analyser correctement le nombre de diapositives (en trouvant en fait un modèle à boucler), il ne peut donc pas bouger.

Après avoir trouvé la cause, il vous suffit de prescrire le bon médicament. Lors de la vérification de l'API de Swiper, j'ai découvert qu'il y avait deux paramètres : observer et observerParents. Le premier démarre le vérificateur dynamique et initialise automatiquement le swiper lors du changement de style du swiper (comme masquer/afficher) ou de la modification des sous-éléments du swiper. Le principe de ce dernier est le même que le premier, sauf que l'observation est appliquée à l'élément parent de Swiper. La valeur par défaut pour les deux est false. Ajoutez donc simplement ces deux lignes au code d'initialisation du swiper d'origine.

var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

Ce qui précède est la solution présentée par l'éditeur pour utiliser Swiper dans AngularJS pour créer des images défilantes qui ne peuvent pas glisser. J'espère que cela vous sera utile si vous avez des questions

Veuillez me laisser un message et je vous répondrai à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles sur l'utilisation de Swiper dans AngularJS pour créer des images défilantes qui ne peuvent pas glisser, veuillez faire attention au site Web PHP chinois !