Die Lösung für das Problem besteht darin, mit Swiper in AngularJS ein Scroll-Diagramm zu erstellen, das nicht verschoben werden kann

Swiper ist derzeit ein beliebtes Touch-Slide-Plug-In für Mobilgeräte. Da es einfach, benutzerfreundlich und benutzerfreundlich ist, wird es von vielen Front-End-Entwicklern begrüßt.

Ich bin heute bei der Verwendung von Swiper auf dieses Problem gestoßen:

Verwenden Sie die dynamische Schleife von anglejs, um die Swiper-Slide-Klasse zu generieren, und generieren Sie mehr als 6 Schiebeseiten in Swiper-Wrapper, aber es ist einfach möglich. Es kann nicht gezeichnet werden. Gehen Sie zur zweiten Seite und versuchen Sie, den Wert von longSwipesRatio auf das Minimum zu ändern, aber es funktioniert immer noch nicht.

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

Beim Testen wurde festgestellt, dass durch manuelles Kopieren von n Schleifenteilen n Blöcke verschoben werden können; nach manueller Anpassung der Fenstergröße, sodass sich das Seitendokument ändert (dynamische Reaktion), kann es normal verschoben werden .

Ich vermute also, dass der Mechanismus von Swiper folgender ist: Während der Initialisierung wird automatisch gescannt, wie viele Swiper-Slide-Klassenblöcke sich unter der Swiper-Wrapper-Klasse befinden und wie viele Blöcke dann gleiten dürfen. In Angular wird es immer definiert, nachdem Swiper initialisiert wurde, und Swiper kann nicht korrekt scannen, wie viele Folien vorhanden sind (und tatsächlich eine Vorlage finden, die in einer Schleife ausgeführt werden soll), sodass es sich nicht bewegen kann.

Nachdem Sie die Ursache gefunden haben, müssen Sie nur noch das richtige Medikament verschreiben. Bei der Überprüfung der Swiper-API habe ich festgestellt, dass es zwei Parameter gibt: Observer und ObservParents. Ersterer startet den dynamischen Prüfer und initialisiert Swiper automatisch, wenn der Swiper-Stil geändert wird (z. B. Ausblenden/Anzeigen) oder die Unterelemente von Swiper geändert werden. Das Prinzip des letzteren ist das gleiche wie das des ersteren, mit der Ausnahme, dass „observ“ auf das übergeordnete Element von Swiper angewendet wird. Der Standardwert für beide ist false. Fügen Sie also einfach diese beiden Zeilen zum ursprünglichen Swiper-Initialisierungscode hinzu.

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

Das Obige ist die Lösung, die Ihnen der Editor vorstellt, wenn Sie Swiper zum Erstellen von Bildlaufbildern verwenden, die in AngularJS nicht verschoben werden können. Ich hoffe, dass sie Ihnen hilfreich sein wird.

Bitte hinterlassen Sie mir eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere verwandte Artikel über die Verwendung von Swiper in AngularJS zum Erstellen von Bildlaufbildern, die nicht verschoben werden können, finden Sie auf der chinesischen PHP-Website!