AngularJS에서 Swiper를 사용하여 슬라이드할 수 없는 스크롤 차트를 만드는 문제에 대한 솔루션

Swiper는 현재 인기 있는 모바일 터치 슬라이딩 플러그인입니다. 간단하고 사용하기 쉬우므로 많은 프런트엔드 개발자들에게 환영을 받고 있습니다.

오늘 Swiper를 사용할 때 이 문제가 발생했습니다.

angularjs 동적 루프를 사용하여 swiper-slide 클래스를 생성하고 swiper-wrapper에서 6개 이상의 슬라이딩 페이지를 생성할 수 있지만 그려지지 않습니다. 두 번째 페이지로 이동하여 longSwipesRatio 값을 최소로 수정해 보았지만 여전히 작동하지 않습니다.

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

테스트 중에 n개의 루프 부분을 수동으로 복사하면 n개의 블록을 수동으로 조정하여 페이지를 변경할 수 있는 것으로 나타났습니다. 문서(동적 반응)에서는 정상적으로 슬라이드할 수 있습니다.

그래서 swiper의 메커니즘은 다음과 같습니다. 초기화 중에 swiper-slide 클래스 블록이 swiper-wrapper 클래스 아래에 몇 개 있는지 자동으로 스캔한 다음 슬라이드할 수 있는 블록 수를 자동으로 검색합니다. Angular에서는 swiper가 초기화된 후에 항상 정의되며 swiper는 슬라이드가 몇 개 있는지 정확하게 스캔할 수 없으므로(실제로는 반복할 템플릿을 찾을 수 없음) 움직일 수 없습니다.

원인을 찾은 후 그에 맞는 약을 처방하면 됩니다. Swiper의 API를 확인했을 때, 관찰자와 관찰부모라는 두 가지 매개변수가 있음을 발견했습니다. 전자는 스와이프 스타일을 변경하거나(예: 숨기기/표시) 스와이프 하위 요소를 수정할 때 동적 검사기를 시작하고 자동으로 스와이프를 초기화합니다. 후자의 원리는 관찰이 Swiper의 상위 요소에 적용된다는 점을 제외하면 전자와 동일합니다. 둘 다의 기본값은 false입니다. 따라서 원래 스위퍼 초기화 코드에 이 두 줄을 추가하면 됩니다.

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