kotak gelongsor ionik

---

ion-slide-box

Kotak gelongsor ialah komponen yang mengandungi bekas berbilang halaman Setiap halaman meluncur atau menyeret untuk menukar:

Pemaparannya seperti berikut:

Penggunaan

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

API

Properties	Taip	Butiran
pemegang wakil (pilihan) 属性 类型 详情 delegate-handle (可选) 字符串 该句柄用$ionicSlideBoxDelegate来标识这个滑动框。 does-continue (可选) 布尔值 滑动框是否自动滑动。 slide-interval (可选) 数字 等待多少毫秒开始滑动（如果继续则为true）。默认为4000。 show-pager (可选) 布尔值 滑动框的页面是否显示。 pager-click (可选) 表达式 当点击页面时，触发该表达式（如果shou-pager为true）。传递一个'索引'变量。 on-slide-changed (可选) 表达式 当滑动时，触发该表达式。传递一个'索引'变量。 active-slide (可选) 表达式 将模型绑定到当前滑动框。	String	Hendal ini menggunakan $ionicSlideBoxDelegate untuk mengenal pasti kotak gelongsor.
tidak-bersambung (pilihan)	Boolean	Sama ada kotak gelongsor meluncur secara automatik.
selang slaid (pilihan)	Nombor	Berapa milisaat untuk menunggu untuk mula meluncur (benar jika diteruskan). Lalai ialah 4000.
show-pager (pilihan)	Boolean	Sama ada halaman kotak gelongsor dipaparkan.
klik kelui (pilihan)	Ungkapan< /kod >	Apabila halaman diklik, ungkapan ini dicetuskan (jika shou-pager adalah benar). Lulus pembolehubah 'indeks'.
pada slaid-diubah (pilihan)<🎜>	Formula Ungkapan	<🎜>Apabila meluncur, ungkapan ini dicetuskan. Lulus pembolehubah 'indeks'. <🎜>
slaid aktif (pilihan)<🎜>	Ungkapan	<🎜>Ikat model pada kotak gelongsor semasa. <🎜>

<🎜><🎜>Contoh<🎜><🎜>Kod HTML<🎜>

<ion-slide-box active-slide="myActiveSlide">
	<ion-slide>
	  <div class="box blue"><h1>BLUE</h1></div>
	</ion-slide>
	<ion-slide>
	  <div class="box yellow"><h1>YELLOW</h1></div>
	</ion-slide>
	<ion-slide>
	  <div class="box pink"><h1>PINK</h1></div>
	</ion-slide>
</ion-slide-box>

<🎜>Kod CSS<🎜>

.slider {
  height: 100%;
}
.slider-slide {
  padding-top: 80px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pink {
  background-color: pink;
}

<🎜> Kod JavaScript<🎜>

angular.module('ionicApp', ['ionic'])

.controller('SlideController', function($scope) {
  
  $scope.myActiveSlide = 1;
  
})

<🎜><🎜><🎜><🎜><🎜>