Лучшее руководство по ионная полоса прокрутки в 2024 году. В этом руководстве вы можете изучить ионно-прокрутки,ионно-бесконечной прокрутки,$ IonicScrollDelegate,
ионному прокрутки используется для создания прокручиваемого контейнера.
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ru. </ion-scroll>
свойство | тип | деталь |
---|---|---|
Делегат-ручка (Необязательно) | 字符串 | Использование ручки |
направление (Необязательно) | 字符串 | Направление прокрутки. 'X' или 'у'. По умолчанию 'у'. |
пейджинг (Необязательно) | 布尔值 | ПЕЙДЖИНГОВАЯ ли прокрутка. |
на обновления (Необязательно) | 表达式 | Вызов раскрывающегося списка обновления с помощью |
на свитке (Необязательно) | 表达式 | Срабатывает, когда пользователь прокручивает. |
полоса прокрутки-х (Необязательно) | 布尔值 | Независимо от того, чтобы отобразить горизонтальную полосу прокрутки. По умолчанию является ложным. |
полоса прокрутки-у (Необязательно) | 布尔值 | Независимо от того, чтобы отобразить вертикальную полосу прокрутки. По умолчанию это верно. |
масштабирование (Необязательно) | 布尔值 | Он поддерживает два пальца зум. |
мин-зум (Необязательно) | 整数 | Минимальное допустимое количество масштабирования (по умолчанию 0.5) |
макс-зум (Необязательно) | 整数 | Максимально допустимое количество масштабирования (по умолчанию 3) |
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('ru/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
body { cursor: url('ru/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(); }); }
Когда данные больше не загружается, вы можете использовать простой метод для предотвращения бесконечной прокрутки, то есть угловая в нг-команды, если:
<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 (Необязательно) | 布尔值 | Следует ли применять анимацию прокрутки. |