Ionic - Gulir JavaScript
Elemen yang digunakan untuk manipulasi pengguliran di aplikasi ionik disebut sebagai ion-scroll.
Menggunakan Scroll
Cuplikan kode berikut akan membuat wadah yang dapat digulir dan menyesuaikan pola pengguliran. Pertama, kami akan membuat elemen HTML kami dan menambahkan properti ke dalamnya. Kami akan menambahkan →direction = "xy"untuk memungkinkan pengguliran ke setiap sisi. Kami juga akan mengatur lebar dan tinggi untuk elemen gulir.
Kode HTML
<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
<div class = "scroll-container"></div>
</ion-scroll>Selanjutnya, kami akan menambahkan gambar peta dunia kami ke div elemen, yang kami buat di dalam ion-scroll dan atur lebar dan tingginya.
Kode CSS
.scroll-container {
width: 2600px;
height: 1000px;
background: url('../img/world-map.png') no-repeat
}Saat kami menjalankan aplikasi kami, kami dapat menggulir peta ke segala arah. Contoh berikut menunjukkan bagian peta Amerika Utara.
Kita dapat menggulir peta ini ke bagian manapun yang kita inginkan. Mari kita gulir untuk menunjukkan Asia.
Ada atribut lain yang dapat diterapkan ke ion-scroll. Anda dapat memeriksanya di tabel berikut.
Gulir Atribut
| Atribut | Tipe | Detail |
|---|---|---|
| arah | tali | Arah gulungan yang mungkin. Nilai defaultnya adalahy |
| delegate-handle | tali | Digunakan untuk identifikasi gulir dengan $ionicScrollDelegate. |
| penguncian | boolean | Digunakan untuk mengunci pengguliran satu arah pada satu waktu. Nilai default benar. |
| paging | boolean | Digunakan untuk menentukan apakah paging akan digunakan dengan scroll. |
| di-refresh | ekspresi | Disebut tarik untuk menyegarkan. |
| di-scroll | ekspresi | Dipanggil saat menggulir. |
| scrollbar-x | boolean | Haruskah bilah gulir horizontal ditampilkan. Nilai default benar. |
| scrollbar-y | tali | Haruskah bilah gulir vertikal ditampilkan. Nilai default benar. |
| zooming | boolean | Digunakan untuk menerapkan pinch-to-zoom. |
| min-zoom | bilangan bulat | Nilai zoom minimal. |
| zoom maks | bilangan bulat | Nilai zoom maksimal. |
| scrollbar-x | boolean | Digunakan untuk mengaktifkan pantulan. Nilai default di IOS adalah benar, di Android salah. |
Gulir Tak Terbatas
Scroll tak terbatas digunakan untuk memicu beberapa perilaku saat scroll melewati bagian bawah halaman. Contoh berikut menunjukkan cara kerjanya. Di pengontrol kami, kami membuat fungsi untuk menambahkan item ke daftar. Item ini akan ditambahkan saat scroll melewati 10% dari elemen terakhir yang dimuat. Ini akan berlanjut hingga kami mencapai 30 elemen yang dimuat. Setiap kali loading selesai,on-infinite akan disiarkan scroll.infiniteScrollComplete peristiwa.
Kode HTML
<ion-list>
<ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>
</ion-list>
<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()"
distance = "10%"></ion-infinite-scroll>Kode Pengontrol
.controller('MyCtrl', function($scope) {
$scope.items = [];
$scope.noMoreItemsAvailable = false;
$scope.loadMore = function() {
$scope.items.push({ id: $scope.items.length});
if ($scope.items.length == 30) {
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
};
})Atribut lain juga dapat digunakan dengan ion-infinite-scroll. Beberapa di antaranya tercantum dalam tabel di bawah ini.
Gulir Atribut
| Atribut | Tipe | Detail |
|---|---|---|
| on-infinite | ekspresi | Apa yang harus dipanggil saat di-scroll ke bawah. |
| jarak | tali | Jarak dari bawah diperlukan untuk memicu ekspresi on-infinite. |
| pemintal | tali | Spinner apa yang harus ditampilkan saat memuat |
| segera periksa | Boolean | Haruskah 'on-infinite' dipanggil saat layar dimuat |
Gulir Delegasi
Ionic menawarkan delegasi untuk kontrol penuh dari elemen gulir. Dapat digunakan dengan menyuntikkan a$ionicScrollDelegate layanan ke pengontrol, lalu gunakan metode yang disediakannya.
Contoh berikut menunjukkan daftar 20 objek yang dapat digulir.
Kode HTML
<div class = "list">
<div class = "item">Item 1</div>
<div class = "item">Item 2</div>
<div class = "item">Item 3</div>
<div class = "item">Item 4</div>
<div class = "item">Item 5</div>
<div class = "item">Item 6</div>
<div class = "item">Item 7</div>
<div class = "item">Item 8</div>
<div class = "item">Item 9</div>
<div class = "item">Item 10</div>
<div class = "item">Item 11</div>
<div class = "item">Item 12</div>
<div class = "item">Item 13</div>
<div class = "item">Item 14</div>
<div class = "item">Item 15</div>
<div class = "item">Item 16</div>
<div class = "item">Item 17</div>
<div class = "item">Item 18</div>
<div class = "item">Item 19</div>
<div class = "item">Item 20</div>
</div>
<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>Kode Pengontrol
.controller('DashCtrl', function($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
})Kode di atas akan menghasilkan layar berikut -
Saat kita tap tombolnya, scroll tersebut akan dipindahkan ke atas.
Sekarang, kita akan membahas semua $ionicScrollDelegate metode.
Metode Delegasi
| metode | Parameter | Tipe | Detail |
|---|---|---|---|
| scrollTop (parameter) | shouldAnimate | boolean | Gulir harus dianimasikan. |
| scrollBottom (parameter) | shouldAnimate | boolean | Gulir harus dianimasikan. |
| scrollTo (parameter1, parameter2, parameter3) | kiri, atas, shouldAnimate | bilangan, bilangan, bilangan bulat | Dua parameter pertama menentukan nilai offset sumbu x, dan sumbu y. |
| scrollBy (parameter1, parameter2, parameter3) | kiri, atas, shouldAnimate | bilangan, bilangan, bilangan bulat | Dua parameter pertama menentukan nilai offset sumbu x, dan sumbu y. |
| zoomTo (parameter1, parameter2, parameter3, parameter4) | level, animate, originLeft, originTop | bilangan, boolean, bilangan, bilangan | level digunakan untuk menentukan tingkat zoom. originLeft dan originRight koordinat tempat pembesaran harus dilakukan. |
| zoomBy (parameter1, parameter2, parameter3, parameter4) | faktor, animate, originLeft, originTop | bilangan, boolean, bilangan, bilangan | factor digunakan untuk menentukan faktor zoom. originLeft dan originRight koordinat tempat pembesaran harus dilakukan. |
| getScrollPosition () | / | / | Mengembalikan objek dengan dua angka sebagai properti: left dan right. Angka-angka ini mewakili jarak yang telah digulir pengguna dari kiri dan dari atas masing-masing. |
| anchorScroll (parameter1) | shouldAnimate | boolean | Ini akan menggulir ke elemen dengan id yang sama dengan window.loaction.hash. Jika elemen ini tidak ada, itu akan bergulir ke atas. |
| freezeScroll (parameter1) | shouldFreeze | boolean | Digunakan untuk menonaktifkan pengguliran untuk gulir tertentu. |
| freezeAllScrolls (parameter1) | shouldFreeze | boolean | Digunakan untuk menonaktifkan pengguliran untuk semua gulungan di aplikasi. |
| getScrollViews () | / | obyek | Mengembalikan objek scrollView. |
| $ getByHandle (parameter1) | menangani | tali | Digunakan untuk menghubungkan metode ke tampilan gulir tertentu dengan pegangan yang sama. $ionicScrollDelegate. $getByHandle('my-handle').scrollTop(); |