W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
滑動(dòng)框是一個(gè)包含多頁容器的組件,每頁滑動(dòng)或拖動(dòng)切換:
效果圖如下:
<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>
屬性 | 類型 | 詳情 |
---|---|---|
delegate-handle (可選) | 字符串 | 該句柄用 |
does-continue (可選) | 布爾值 | 滑動(dòng)框是否自動(dòng)滑動(dòng)。 |
slide-interval (可選) | 數(shù)字 | 等待多少毫秒開始滑動(dòng)(如果繼續(xù)則為true)。默認(rèn)為4000。 |
show-pager (可選) | 布爾值 | 滑動(dòng)框的頁面是否顯示。 |
pager-click (可選) | 表達(dá)式 | 當(dāng)點(diǎn)擊頁面時(shí),觸發(fā)該表達(dá)式(如果shou-pager為true)。傳遞一個(gè)'索引'變量。 |
on-slide-changed (可選) | 表達(dá)式 | 當(dāng)滑動(dòng)時(shí),觸發(fā)該表達(dá)式。傳遞一個(gè)'索引'變量。 |
active-slide (可選) | 表達(dá)式 | 將模型綁定到當(dāng)前滑動(dòng)框。 |
<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>
.slider { height: 100%; } .slider-slide { 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; } .box{ height:100%; } .box h1{ position:relative; top:50%; transform:translateY(-50%); }
angular.module('ionicApp', ['ionic']) .controller('SlideController', function($scope) { $scope.myActiveSlide = 1; })
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: