Ionic - Kotak Slide JavaScript

Kotak Slide berisi halaman yang dapat diubah dengan menggesek layar konten.

Menggunakan Slide Box

Penggunaan kotak slide itu sederhana. Anda hanya perlu menambahkanion-slide-box sebagai wadah dan ion-slidedengan kelas kotak di dalam wadah itu. Kami akan menambahkan tinggi dan batas ke kotak kami untuk visibilitas yang lebih baik.

Kode HTML

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

Output akan terlihat seperti yang ditunjukkan pada tangkapan layar berikut -

Kita dapat mengubah kotak tersebut dengan menyeret konten ke kanan. Kami juga dapat menyeret ke kiri untuk menampilkan kotak sebelumnya.

Beberapa atribut yang dapat digunakan untuk mengontrol perilaku kotak slide disebutkan dalam tabel berikut.

Metode Delegasi

Atribut	Tipe	Detail
tidak-lanjutkan	Boolean	Haruskah menggeser lingkaran kotak saat kotak pertama atau terakhir tercapai.
putar otomatis	Boolean	Haruskah kotak geser meluncur secara otomatis.
interval geser	jumlah	Nilai waktu antara perubahan slide otomatis dalam milidetik. Nilai defaultnya adalah 4000.
show-pager	Boolean	Haruskah pager terlihat.
pager-click	ekspresi	Dipanggil ketika pager diketuk (jika pager terlihat). $index digunakan untuk mencocokkan dengan slide yang berbeda.
di-slide-diubah	ekspresi	Dipanggil saat slide diubah. $index digunakan untuk mencocokkan dengan slide yang berbeda.
slide aktif	ekspresi	Digunakan sebagai model untuk mengikat indeks slide saat ini.
delegate-handle	tali	Digunakan untuk identifikasi kotak geser dengan $ionicSlideBoxDelegate.

Delegasi Kotak Geser

Itu $ionicSlideBoxDelegateadalah layanan yang digunakan untuk mengontrol semua kotak slide. Kita perlu menyuntikkannya ke pengontrol.

Kode Pengontrol

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

Kode HTML

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

Tabel berikut menunjukkan $ionicSlideBoxDelegate metode.

Metode Delegasi

metode	Parameter	Tipe	Detail
slide (parameter1, parameter2)	mempercepat	nomor, nomor	Parameter to mewakili indeks untuk digeser. speed menentukan seberapa cepat perubahan dalam milidetik.
enableSlide (parameter1)	shouldEnable	boolean	Digunakan untuk enambling atau menonaktifkan sliding.
sebelumnya (parameter1)	kecepatan	jumlah	Nilai perubahan harus dilakukan dalam milidetik.
berhenti()	/	/	Digunakan untuk menghentikan perosotan.
Mulailah()	/	/	Digunakan untuk memulai perosotan.
currentIndex ()	/	jumlah	Mengembalikan indeks dari slide saat ini.
slidesCount ()	/	jumlah	Mengembalikan jumlah total slide.
$ getByHandle (parameter1)	menangani	tali	Digunakan untuk menghubungkan metode ke kotak slide tertentu dengan pegangan yang sama. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();