Latest web development tutorials

이온 스크롤

이온 스크롤

이온 스크롤 스크롤 컨테이너를 만드는 데 사용됩니다.

용법 

<ion-scroll
	[delegate-handle=""]
	[direction=""]
	[paging=""]
	[on-refresh=""]
	[on-scroll=""]
	[scrollbar-x=""]
	[scrollbar-y=""]
	[zooming=""]
	[min-zoom=""]
	[max-zoom=""]>
	...
</ion-scroll>

API

재산 유형 세부 정보
대표 핸들
(선택 사항)
字符串

핸들을 사용 $ionicScrollDelegate 스크롤 뷰를 지정.

방향
(선택 사항)
字符串

스크롤의 방향. 'X'또는 'Y'. 기본 'Y'.

페이징
(선택 사항)
布尔值

스크롤 여부를 페이징.

에 새로 고침
(선택 사항)
表达式

에 의해 드롭 다운 새로 고침 전화 ionRefresher 트리거를.

에 스크롤
(선택 사항)
表达式

때 화재 사용자가 스크롤.

스크롤-X
(선택 사항)
布尔值

가로 스크롤 막대를 표시할지 여부. 기본값은 false입니다.

스크롤-Y
(선택 사항)
布尔值

세로 스크롤 막대를 표시할지 여부. 기본값은 true입니다.

확대
(선택 사항)
布尔值

그것은 두 손가락 줌을 지원합니다.

분 줌
(선택 사항)
整数

스케일링의 최소 허용 크기 (기본값은 0.5입니다)

최대 줌
(선택 사항)
整数

스케일링의 최대 허용 금액 (기본값은 3)

예

HTML 코드 

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
	<div style="width: 5000px; height: 5000px; background: url('../try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS 코드 

body {
  cursor: url('../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>

API

재산 유형 세부 정보
온 - 무한 表达式

트리거 이벤트의 단부에서 스크롤 할 때.

거리
(선택 사항)
字符串

에 무한 식 거리를 트리거 하단에서 스크롤합니다. 기본값 : 1 %.

아이콘
(선택 사항)
字符串

로드 할 때 아이콘이 표시됩니다. 기본값 : '이온 로딩-D'.

$ IonicScrollDelegate

권한 부여 (이온 콘텐츠 및 이온 스크롤 명령에 의해 생성) 스크롤 뷰를 제어 할 수 있습니다.

직접적인 방법은 스크롤 뷰를 모두 제어 할 수 $ 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
(선택 사항)
布尔值

여부는 스크롤 애니메이션을 적용합니다.