최고의 이온 스크롤 튜토리얼 2024년, 이 튜토리얼에서는 이온 스크롤,이온 무한 스크롤,$ IonicScrollDelegate,를 배울 수 있습니다.
이온 스크롤 스크롤 컨테이너를 만드는 데 사용됩니다.
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ko. </ion-scroll>
재산 | 유형 | 세부 정보 |
---|---|---|
대표 핸들 (선택 사항) | 字符串 | 핸들을 사용 |
방향 (선택 사항) | 字符串 | 스크롤의 방향. 'X'또는 'Y'. 기본 'Y'. |
페이징 (선택 사항) | 布尔值 | 스크롤 여부를 페이징. |
에 새로 고침 (선택 사항) | 表达式 | 에 의해 드롭 다운 새로 고침 전화 |
에 스크롤 (선택 사항) | 表达式 | 때 화재 사용자가 스크롤. |
스크롤-X (선택 사항) | 布尔值 | 가로 스크롤 막대를 표시할지 여부. 기본값은 false입니다. |
스크롤-Y (선택 사항) | 布尔值 | 세로 스크롤 막대를 표시할지 여부. 기본값은 true입니다. |
확대 (선택 사항) | 布尔值 | 그것은 두 손가락 줌을 지원합니다. |
분 줌 (선택 사항) | 整数 | 스케일링의 최소 허용 크기 (기본값은 0.5입니다) |
최대 줌 (선택 사항) | 整数 | 스케일링의 최대 허용 금액 (기본값은 3) |
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('ko/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
body { cursor: url('ko/try/demo_source/finger.png'), auto; }
angular.module('ionicApp', ['ionic']);
사용자가 바닥 글 또는 바닥 글의 근처에 도달하면, ionInfiniteScroll 명령은 함수를 호출 할 수 있습니다.
사용자가 콘텐츠의 하부를 넘어 거리를 스크롤 할 때, 온 - 무한 지정하도록 트리거된다.
<ion-content ng-controller="MyController"> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-content>
function MyController($scope, $http) { $scope.items = []; $scope.loadMore = function() { $http.get('/more-items').success(function(items) { useItems(items); $scope.$broadcast('scroll.infiniteScrollComplete'); }); }; $scope.$on('stateChangeSuccess', function() { $scope.loadMore(); }); }
더 이상 데이터가로드되지 않은 경우, 당신은 무한 스크롤을 방지하는 간단한 방법을 사용할 수 있습니다, 즉 NG-경우 명령 각도입니다 :
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
재산 | 유형 | 세부 정보 |
---|---|---|
온 - 무한 | 表达式 | 트리거 이벤트의 단부에서 스크롤 할 때. |
거리 (선택 사항) | 字符串 | 에 무한 식 거리를 트리거 하단에서 스크롤합니다. 기본값 : 1 %. |
아이콘 (선택 사항) | 字符串 | 로드 할 때 아이콘이 표시됩니다. 기본값 : '이온 로딩-D'. |
권한 부여 (이온 콘텐츠 및 이온 스크롤 명령에 의해 생성) 스크롤 뷰를 제어 할 수 있습니다.
직접적인 방법은 스크롤 뷰를 모두 제어 할 수 $ ionicScrollDelegate 서비스를 트리거됩니다. $ getByHandle 방법과 특정 스크롤 뷰를 제어 할 수 있습니다.
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }
resize()
컨테이너의 크기를 다시 계산 스크롤 뷰를 말한다.
scrollTop([shouldAnimate])
매개 변수 | 유형 | 세부 정보 |
---|---|---|
shouldAnimate (선택 사항) | 布尔值 | 여부는 스크롤 애니메이션을 적용합니다. |
scrollBottom([shouldAnimate])
매개 변수 | 유형 | 세부 정보 |
---|---|---|
shouldAnimate (선택 사항) | 布尔值 | 여부는 스크롤 애니메이션을 적용합니다. |