이온 스크롤바


ion-scroll

ion-scroll은 스크롤 가능한 컨테이너를 만드는 데 사용됩니다.

Usage

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

API

PropertyTypeDetails
대리자 핸들
(선택 사항)
 문자열 字符串

该句柄利用$ionicScrollDelegate指定滚动视图。

direction
(可选)
字符串

滚动的方向。 'x' 或 'y'。 默认 'y'。

paging
(可选)
布尔值

分页是否滚动。

on-refresh
(可选)
表达式

调用下拉刷新， 由ionRefresher触发。

on-scroll
(可选)
表达式

当用户滚动时触发。

scrollbar-x
(可选)
布尔值

是否显示水平滚动条。默认为false。

scrollbar-y
(可选)
布尔值

是否显示垂直滚动条。默认为true。

zooming
(可选)
布尔值

是否支持双指缩放。

min-zoom
(可选)
整数

允许的最小缩放量（默认为0.5）

max-zoom
(可选)
整数

允许的最大缩放量（默认为3）

实例

HTML 代码

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

CSS 代码

body {
  cursor: url('../style/images/finger.png'), auto;
}

JavaScript 代码

angular.module('ionicApp', ['ionic']);


ion-infinite-scroll

当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。

当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。

用法

<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();
  });
}

当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动，那就是angular的ng-if 指令:

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

direction
属性类型详情
on-infinite表达式

当滚动到底部时触发的事件。

distance
(可选)
字符串

从底部滚动到触发on-infinite表达式的距离。默认: 1%。

icon
(可选)
字符串 이 핸들 $ionicScrollDelegate를 사용하여 스크롤 뷰를 지정합니다.

🎜(선택 사항)🎜🎜🎜🎜String🎜🎜🎜스크롤 방향. 'x' 또는 'y'. 기본값은 'y'입니다. 🎜🎜🎜🎜🎜paging🎜🎜(선택 사항)🎜🎜🎜🎜부울 값🎜🎜🎜페이징이 스크롤되는지 여부. 🎜🎜🎜🎜🎜on-refresh🎜🎜(선택 사항)🎜🎜🎜🎜expression🎜🎜🎜ionRefresher에 의해 트리거되는 풀다운 새로 고침을 호출합니다. 🎜🎜🎜🎜🎜on-scroll🎜🎜(선택 사항)🎜🎜🎜🎜expression🎜🎜🎜사용자가 스크롤할 때 실행됩니다. 🎜🎜🎜🎜🎜scrollbar-x🎜🎜(선택 사항)🎜🎜🎜🎜부울 값🎜🎜🎜가로 스크롤 막대 표시 여부. 기본값은 거짓입니다. 🎜🎜🎜🎜🎜scrollbar-y🎜🎜(선택 사항)🎜🎜🎜🎜부울 값🎜🎜🎜세로 스크롤 막대 표시 여부. 기본값은 true입니다. 🎜🎜🎜🎜🎜zooming🎜🎜(선택 사항)🎜🎜🎜🎜부울 값🎜🎜🎜두 손가락 확대/축소 지원 여부. 🎜🎜🎜🎜🎜min-zoom🎜🎜(선택 사항)🎜🎜🎜🎜정수🎜🎜🎜허용되는 최소 확대/축소 크기(기본값은 0.5)🎜🎜🎜🎜🎜max-zoom🎜🎜( 선택 사항) 🎜🎜🎜🎜정수🎜🎜🎜최대 크기 조정 허용(기본값은 3)🎜🎜🎜🎜🎜🎜Instance🎜🎜HTML code🎜
<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>
🎜CSS code🎜
function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}
🎜JavaScript code🎜 에에🎜< br/>🎜🎜🎜ion-infinite-scroll🎜🎜 ionInfiniteScroll 지시문을 사용하면 사용자가 바닥글에 도달하거나 근처에 있을 때 함수를 호출할 수 있습니다. 🎜🎜사용자가 하단 콘텐츠를 넘어 스크롤하면 지정한 무한대가 트리거됩니다. 🎜🎜Usage🎜
resize()
scrollTop([shouldAnimate])
🎜더 이상 데이터가 로드되지 않을 때 무한 스크롤을 방지하는 간단한 방법은 Angular의 ng-if 지시어입니다:🎜
scrollBottom([shouldAnimate])
🎜API🎜🎜🎜🎜🎜Attributes🎜🎜Type🎜🎜Details 🎜🎜🎜 🎜🎜🎜온- Infinite🎜🎜expression🎜🎜🎜하단으로 스크롤하면 이벤트가 발생합니다. 🎜🎜🎜🎜🎜distance🎜🎜(선택 사항)🎜🎜🎜🎜String🎜🎜🎜on-infinite 표현을 트리거하는 바닥으로부터의 거리입니다. 기본값: 1%. 🎜🎜🎜🎜🎜icon🎜🎜(선택)🎜🎜🎜🎜String🎜🎜🎜로딩 시 표시되는 아이콘입니다. 기본값: '이온-로딩-d'. 🎜🎜🎜🎜🎜

$ionicScrollDelegate

스크롤 뷰의 제어를 위임합니다(ion-content 및 ion-scroll 지시문을 통해 생성됨).

이 메서드는 $ionicScrollDelegate 서비스에 의해 직접 트리거되어 모든 스크롤 보기를 제어합니다. 특정 스크롤 보기를 제어하려면 $getByHandle 메소드를 사용하십시오.

Usage

rrreeerrreee

Method

rrreee

스크롤 뷰에 컨테이너 크기를 다시 계산하도록 지시합니다.

rrreee
ParametersTypeDetails
shouldAnimate
(선택 사항)
부울布尔值

是否应用滚动动画。

rrreeerrreee
参数类型详情
shouldAnimate
(可选)
布尔值 스크롤 애니메이션 적용 여부입니다.

🎜🎜Parameters🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜shouldAnimate🎜🎜(선택 사항)🎜🎜🎜🎜Bo olean 값 🎜🎜🎜 스크롤 애니메이션 적용 여부 . 🎜🎜🎜🎜🎜🎜