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 Sie durch manuelles Kopieren von n Schleifenteilen die Fenstergröße manuell anpassen können, um die Seite zu ändern Dokument (dynamische Reaktion) können Sie normal blättern.

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 Erstere, mit der Ausnahme, dass die Beobachtung 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
})