boîte coulissante ionique

---

ion-slide-box

La boîte coulissante est un composant contenant des conteneurs multipages Chaque page peut être basculée en glissant ou en faisant glisser :

Le rendu. est la suivante :

Utilisation

<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

Propriétés	Type	Détails
delegate-handle (facultatif) 属性 类型 详情 delegate-handle (可选) 字符串 该句柄用$ionicSlideBoxDelegate来标识这个滑动框。 does-continue (可选) 布尔值 滑动框是否自动滑动。 slide-interval (可选) 数字 等待多少毫秒开始滑动（如果继续则为true）。默认为4000。 show-pager (可选) 布尔值 滑动框的页面是否显示。 pager-click (可选) 表达式 当点击页面时，触发该表达式（如果shou-pager为true）。传递一个'索引'变量。 on-slide-changed (可选) 表达式 当滑动时，触发该表达式。传递一个'索引'变量。 active-slide (可选) 表达式 将模型绑定到当前滑动框。	String	Ce handle utilise $ionicSlideBoxDelegate pour identifier cette boîte coulissante.
continue-continue (facultatif)	Booléen	Si la boîte coulissante glisse automatiquement.
intervalle de diapositive (facultatif)	Numéro code>	Combien de millisecondes attendre pour commencer à glisser (vrai si continuer). La valeur par défaut est 4 000.
show-pager (facultatif)	Booléen	Si la page de la boîte coulissante est affichée.
pager-clic (facultatif)	Expression	Lorsque l'on clique sur la page, cette expression est déclenchée (si shou-pager est vrai). Passez une variable 'index'.
sur diapositive modifiée (facultatif)<🎜>	Formule d'expression	<🎜>Lors du glissement, cette expression est déclenchée. Passez une variable 'index'. <🎜>
active-slide (facultatif)<🎜>	Expression	<🎜>Liez le modèle à la boîte coulissante actuelle. <🎜>

<🎜><🎜>Exemple<🎜><🎜>Code 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>

<🎜>Code 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;
}

<🎜> Code JavaScript<🎜>

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

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

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