scrollbar ionik
ion-scroll
ion-scroll digunakan untuk membuat wadah digulir.
pemakaian
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> id. </ion-scroll>
API
milik | jenis | Detil |
---|---|---|
delegasi-handle (Opsional) | 字符串 | Pegangan Penggunaan |
arah (Opsional) | 字符串 | Arah bergulir. 'X' atau 'y'. Default 'y'. |
paging (Opsional) | 布尔值 | Paging apakah bergulir. |
on-penyegaran (Opsional) | 表达式 | Hubungi drop-down penyegaran oleh |
on-scroll (Opsional) | 表达式 | Kebakaran ketika pengguna gulungan. |
scrollbar-x (Opsional) | 布尔值 | Apakah akan menampilkan scroll bar horizontal. default adalah palsu. |
scrollbar-y (Opsional) | 布尔值 | Apakah untuk menampilkan scroll bar vertikal. default adalah benar. |
zooming (Opsional) | 布尔值 | Mendukung dua jari zoom. |
min-zoom (Opsional) | 整数 | Jumlah minimum yang diizinkan scaling (default 0.5) |
max-zoom (Opsional) | 整数 | Jumlah maksimum dari skala (default adalah 3) |
contoh
kode HTML
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('id/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
kode CSS
body { cursor: url('id/try/demo_source/finger.png'), auto; }
kode JavaScript
angular.module('ionicApp', ['ionic']);
ion-tak terbatas-scroll
Ketika pengguna mencapai sekitar footer atau footer, perintah ionInfiniteScroll memungkinkan Anda untuk memanggil fungsi.
Ketika pengguna gulungan jarak di luar bagian bawah konten, itu akan memicu Anda untuk menentukan on-tak terbatas.
pemakaian
<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(); }); }
Bila tidak ada lagi data yang dimuat, Anda dapat menggunakan metode sederhana untuk mencegah gulir tak terbatas, yaitu sudut dalam ng-jika perintah:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
API
milik | jenis | Detil |
---|---|---|
on-tak terbatas | 表达式 | Ketika bergulir di bagian akhir acara pemicu. |
jarak (Opsional) | 字符串 | Gulir dari bawah untuk memicu on-terbatas ekspresi jarak. Default: 1%. |
icon (Opsional) | 字符串 | Ikon ditampilkan ketika loading. Default: 'ion-loading-d'. |
$ IonicScrollDelegate
Otorisasi mengontrol tampilan gulir (dibuat oleh ion-konten dan instruksi ion-scroll).
Metode langsung dipicu layanan $ ionicScrollDelegate untuk mengontrol semua tampilan gulir. Mengontrol tampilan gulir tertentu dengan metode $ getByHandle.
pemakaian
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }
cara
resize()
Beritahu gulir untuk menghitung ulang ukuran wadah.
scrollTop([shouldAnimate])
parameter | jenis | Detil |
---|---|---|
shouldAnimate (Opsional) | 布尔值 | Apakah untuk menerapkan scroll animasi. |
scrollBottom([shouldAnimate])
parameter | jenis | Detil |
---|---|---|
shouldAnimate (Opsional) | 布尔值 | Apakah untuk menerapkan scroll animasi. |