javascript - 콘텐츠 높이가 화면 높이보다 작은 경우 autoHeight를 설정할 때 swiper.js가 제대로 작동하지 않습니다.
phpcn_u15822017-05-19 10:43:35
0
1
539
swiper.js를 사용하여 탭 항목 전환을 구현했지만 각 탭 항목의 높이가 다르고 데이터가 비동기적으로 로드됩니다. AutoHeight: swiper-container의 적응형 높이에 대해 true로 설정되어 있지만 콘텐츠 높이가 < 화면 높이 이 속성은 더 이상 작동하지 않습니다 js 설정을 통해 변경했지만 여전히 빈 영역을 아래로 밀 수 있습니다. 어떻게 해결합니까?
스위퍼 컨테이너는 P 박스이기 때문에 하위 탭 중 가장 큰 높이를 자체 높이로 사용하는 문제를 겪은 적이 있습니다. 따라서 CSS를 사용하는 것만으로는 충분하지 않으며 판단하려면 JS를 추가해야 합니다.
해결책: 1. 먼저 탭 전환 이벤트의 콜백을 수신합니다. 탭 전환이 완료된 후 현재 탭 콘텐츠의 높이를 얻은 다음 js는 외부 스와이퍼 컨테이너를 현재 콘텐츠 높이로 설정합니다. 2. 둘째, 동적 콘텐츠가 로드된 후 원칙은 동일합니다. 콘텐츠 높이를 수동으로 얻은 다음 외부 컨테이너의 높이를 현재 콘텐츠 높이로 설정합니다.
특정 코드가 없어서 나중에 게시할 수 있지만 아이디어가 있고 확실히 구현할 수 있다고 믿습니다!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
스위퍼 컨테이너는 P 박스이기 때문에 하위 탭 중 가장 큰 높이를 자체 높이로 사용하는 문제를 겪은 적이 있습니다. 따라서 CSS를 사용하는 것만으로는 충분하지 않으며 판단하려면 JS를 추가해야 합니다.
해결책:
1. 먼저 탭 전환 이벤트의 콜백을 수신합니다. 탭 전환이 완료된 후 현재 탭 콘텐츠의 높이를 얻은 다음 js는 외부 스와이퍼 컨테이너를 현재 콘텐츠 높이로 설정합니다.
2. 둘째, 동적 콘텐츠가 로드된 후 원칙은 동일합니다. 콘텐츠 높이를 수동으로 얻은 다음 외부 컨테이너의 높이를 현재 콘텐츠 높이로 설정합니다.
특정 코드가 없어서 나중에 게시할 수 있지만 아이디어가 있고 확실히 구현할 수 있다고 믿습니다!