Прокрутка Ionic

ion-scroll

ion-scroll используется для создания прокручиваемого контейнера.

Использование

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

API

Атрибуты Type Подробности
delegate-handle
(Необязательно)
 string

Дескриптор используется для$ionicScrollDelegateуказания прокручиваемого представления.
Направление
(Необязательно)
 string

Направление прокрутки. 'x' или 'y'. По умолчанию 'y'.
paging
(Необязательно)
 boolean

Определяет, выполнять ли прокрутку постранично.
on-refresh
(Необязательно)
 expression

Вызывается, когда жест «потянуть для обновления»ionRefresherсрабатывает.
on-scroll
(Необязательно)
 expression

Срабатывает, когда пользователь прокручивает.
scrollbar-x
(Необязательно)
 boolean

Показывать ли горизонтальную полосу прокрутки. По умолчанию false.
scrollbar-y
(Необязательно)
 boolean

Показывать ли вертикальную полосу прокрутки. По умолчанию true.
zooming
(Необязательно)
 boolean

Поддерживать ли масштабирование щипком (двумя пальцами).
min-zoom
(Необязательно)
 integer

Минимально допустимый масштаб (по умолчанию 0.5)
max-zoom
(Необязательно)
 integer

Максимально допустимый масштаб (по умолчанию 3)

Пример

HTML-код

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

CSS-код

body {
  cursor: url('http://www.example.com/try/demo_source/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

Атрибуты Type Подробности
on-infinite expression

Событие, срабатывающее при прокрутке до нижней границы.
distance
(Необязательно)
 string

Расстояние от нижней границы для срабатывания выражения on-infinite. По умолчанию: 1%.
icon
(Необязательно)
 string

Иконка, отображаемая во время загрузки. По умолчанию: 'ion-loading-d'.

$ionicScrollDelegate

Делегирует управление прокручиваемыми представлениями (созданными с помощью директив ion-content и ion-scroll).

Этот метод вызывается напрямую сервисом $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])
Parameters Type Подробности
shouldAnimate
(Необязательно)
 boolean

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

 
scrollBottom([shouldAnimate])
Parameters Type Подробности
shouldAnimate
(Необязательно)
 boolean

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