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' или 'у'. По умолчанию 'у'.

пейджинг
(Необязательно)
布尔值

ПЕЙДЖИНГОВАЯ ли прокрутка.

на обновления
(Необязательно)
表达式

Вызов раскрывающегося списка обновления с помощью ionRefresher триггера.

на свитке
(Необязательно)
表达式

Срабатывает, когда пользователь прокручивает.

полоса прокрутки-х
(Необязательно)
布尔值

Независимо от того, чтобы отобразить горизонтальную полосу прокрутки. По умолчанию является ложным.

полоса прокрутки-у
(Необязательно)
布尔值

Независимо от того, чтобы отобразить вертикальную полосу прокрутки. По умолчанию это верно.

масштабирование
(Необязательно)
布尔值

Он поддерживает два пальца зум.

мин-зум
(Необязательно)
整数

Минимальное допустимое количество масштабирования (по умолчанию 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;
}

код JavaScript

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

Когда данные больше не загружается, вы можете использовать простой метод для предотвращения бесконечной прокрутки, то есть угловая в нг-команды, если:

<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
(Необязательно)
布尔值

Следует ли применять анимацию прокрутки.