bar skrol ionik
ion-scroll
ion-scroll digunakan untuk mencipta bekas boleh ditatal.
Penggunaan
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ... </ion-scroll>
API
| Atribut | Jenis< /th> | Butiran | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| pemegang wakil (pilihan) < / td> | String |
$ionicScrollDelegate untuk menentukan paparan skrol. | |||||||||||||||||||||||||||||||||
| arah (pilihan) | String | Arah menatal. 'x' atau 'y'. Lalai ialah 'y'. | |||||||||||||||||||||||||||||||||
| halaman (pilihan) | Nilai Boolean | Sama ada paging sedang menatal. | |||||||||||||||||||||||||||||||||
| pada muat semula (pilihan) | Ungkapan | Segar semula tarik turun panggilan, dicetuskan oleh ionRefresher. | |||||||||||||||||||||||||||||||||
| pada tatal (pilihan) | Ungkapan | Dicetuskan apabila pengguna menatal. | |||||||||||||||||||||||||||||||||
| scrollbar-x (pilihan) | Nilai Boolean < /code> | Sama ada hendak memaparkan bar skrol mendatar. Lalai adalah palsu. | |||||||||||||||||||||||||||||||||
| scrollbar-y (pilihan) | Nilai Boolean < /code> | Sama ada hendak memaparkan bar skrol menegak. Lalai adalah benar. | |||||||||||||||||||||||||||||||||
| zum (pilihan) | Nilai Boolean | Sama ada untuk menyokong zum dua jari. | |||||||||||||||||||||||||||||||||
| min-zoom (pilihan) | integer | Zum minimum dibenarkan (lalai ialah 0.5) | |||||||||||||||||||||||||||||||||
| zum maksimum ( Pilihan)< /em> | Integer | Jumlah maksimum penskalaan yang dibenarkan (lalai ialah 3)< /td> |
<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>
Kod CSS| 属性 | 类型 | 详情 |
|---|---|---|
| on-infinite | 表达式 | 当滚动到底部时触发的事件。 |
| distance (可选) | 字符串 | 从底部滚动到触发on-infinite表达式的距离。默认: 1%。 |
| icon (可选) | 字符串 | 当加载时显示的图标。默认: 'ion-loading-d'。 |
body {
cursor: url('../style/images/finger.png'), auto;
}<🎜>Kod JavaScript<🎜>angular.module('ionicApp', ['ionic']);< 🎜>< 🎜><🎜><🎜><🎜>ion-infinite-scroll<🎜><🎜>Arahan ionInfiniteScroll membolehkan anda memanggil fungsi apabila pengguna mencapai atau berhampiran pengaki. <🎜><🎜>Apabila pengguna menatal melepasi kandungan bawah, on-infinite yang anda tentukan akan dicetuskan. <🎜><🎜>Penggunaan<🎜><ion-content ng-controller="MyController"> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-content>rrree<🎜>Apabila tiada lagi data dimuatkan, terdapat cara mudah untuk menghalang penatalan tak terhingga, iaitu arahan ng-if sudut: <🎜>
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();
});
}<🎜>API <🎜> | Properties | Jenis | Butiran |
|---|---|---|
| on-infinite | Expression | <🎜>Acara dicetuskan apabila menatal ke bawah . <🎜> |
| jarak (pilihan) | String | <🎜>Tatal dari bawah untuk mencetuskan ungkapan on-infinite. Lalai: 1%. <🎜> |
| ikon (pilihan) | String | <🎜>Ikon dipaparkan semasa memuatkan. Lalai: 'ion-loading-d'. <🎜> |
$ionicScrollDelegate
Mewakilkan kawalan paparan skrol (dicipta melalui arahan kandungan ion dan tatal ion).
Kaedah ini dicetuskan secara langsung oleh perkhidmatan $ionicScrollDelegate untuk mengawal semua paparan skrol. Gunakan kaedah $getByHandle untuk mengawal paparan skrol tertentu.
Penggunaan
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
Kaedah
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
}memberitahu paparan tatal untuk mengira semula saiz bekasnya.
resize()
| Parameter | Jenis | Butiran | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| harusAnimate (pilihan)
| Nilai Boolean |
|
scrollTop([shouldAnimate])
| Parameter | Taip | Butiran |
|---|---|---|
| sepatutnya Menghidupkan (pilihan)<🎜> Nilai Boolean<🎜>Sama ada hendak menggunakan animasi skrol. <🎜> | |
