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개의 루프 부분을 수동으로 복사하면 페이지 문서가 변경되도록(동적 응답) 창 크기를 수동으로 조정한 후 정상적으로 슬라이드할 수 있는 것으로 나타났습니다. .

그래서 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
})

위는 Swiper를 사용하여 AngularJS에서 슬라이드할 수 없는 스크롤 이미지를 만들 때 편집자가 소개하는 솔루션입니다. 궁금한 점이 있으시면 도움이 되길 바랍니다.

메시지를 남겨주시면 시간 맞춰 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

AngularJS에서 Swiper를 사용하여 슬라이드할 수 없는 스크롤 이미지를 만드는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!