Tutorial scrollbar ionik Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari ion-scroll,ion-tak terbatas-scroll,$ IonicScrollDelegate,
ion-scroll digunakan untuk membuat wadah digulir.
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> id. </ion-scroll>
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) |
<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>
body { cursor: url('id/try/demo_source/finger.png'), auto; }
angular.module('ionicApp', ['ionic']);
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.
<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>
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'. |
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.
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }
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. |