Najlepszy samouczek jonowe przewijania W 2024 r. W tym samouczku możesz dowiedzieć się jon-scroll,jonów nieskończone przewijanie,$ IonicScrollDelegate,
jonów przewijania jest używany do tworzenia przewijalną pojemnik.
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> pl. </ion-scroll>
nieruchomość | typ | detal |
---|---|---|
Delegat rękojeść (Opcjonalnie) | 字符串 | Zastosowanie uchwytu |
kierunek (Opcjonalnie) | 字符串 | Kierunek przewijania. "X" lub "Y". Domyślnie 'y'. |
stronicowania (Opcjonalnie) | 布尔值 | Stronicowanie czy przewijanie. |
na odświeżenie (Opcjonalnie) | 表达式 | Zadzwoń do odświeżenia rozwijanej poprzez |
na zwoju (Opcjonalnie) | 表达式 | Odpala, gdy użytkownik przewija. |
przewijania-x (Opcjonalnie) | 布尔值 | Czy do wyświetlania poziomego paska przewijania. Wartością domyślną jest false. |
przewijania-y (Opcjonalnie) | 布尔值 | Niezależnie od tego, aby wyświetlić pionowy pasek przewijania. Domyślnie jest to prawda. |
powiększanie (Opcjonalnie) | 布尔值 | Obsługuje dwoma palcami zoom. |
min-zoom (Opcjonalnie) | 整数 | Minimalna dopuszczalna wysokość skalowania (domyślnie 0.5) |
max-zoom (Opcjonalnie) | 整数 | Maksymalna dopuszczalna ilość skalowania (domyślnie 3) |
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('pl/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
body { cursor: url('pl/try/demo_source/finger.png'), auto; }
angular.module('ionicApp', ['ionic']);
Gdy użytkownik dotrze w pobliże stopce lub stopce, Komenda ionInfiniteScroll pozwala wywołać funkcję.
Gdy użytkownik przewija odległość poza dno treści, będzie to powodować określenie na nieskończony.
<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(); }); }
Gdy nie ma więcej danych jest załadowany, można użyć prostego sposobu, aby zapobiec nieskończoną zwój, który jest kątowa w ng-IF polecenia:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
nieruchomość | typ | detal |
---|---|---|
na nieskończone | 表达式 | Podczas przewijania w części końcowej zdarzenia wyzwalającego. |
dystans (Opcjonalnie) | 字符串 | Przewijanie od dołu do uruchomienia on-nieskończony dystans wyrażeń. Domyślnie: 1%. |
ikona (Opcjonalnie) | 字符串 | Ikona jest wyświetlana podczas ładowania. Domyślnie: 'ion ładowania-d'. |
Autoryzacja kontrolować widok przewijania (tworzone przez jonowej zawartości jonów i instrukcji przewijania).
Metoda bezpośrednia jest wyzwalany usługę $ ionicScrollDelegate kontrolować wszystkich widoku przewijania. Kontroluj konkretny widok przewijania z metod $ 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()
Powiedz widok przewijania, aby przeliczyć jego wielkości kontenera.
scrollTop([shouldAnimate])
parametry | typ | detal |
---|---|---|
shouldAnimate (Opcjonalnie) | 布尔值 | Czy zastosować animację przewijania. |
scrollBottom([shouldAnimate])
parametry | typ | detal |
---|---|---|
shouldAnimate (Opcjonalnie) | 布尔值 | Czy zastosować animację przewijania. |