ionic滑动框 ---轮播图(ion-slide-box) 的使用
1. html :
1 <ion-slide-box auto-play="true" slide-interval=3000 show-pager="false" does-continue='true'> 2 <ion-slide ng-repeat='foot in foots' pager-click='showCurrent($index)'> 3 <div class='foot-item'> 4 <div class='item-box' flex="main:justify cross:center"> 5 <div class='item-info' flex="main:justify cross:center"> 6 <div class='foot-img'> 7 <img ng-src="{{foot.src}}" alt="user"> 8 </div> 9 <div class='other-income'><span class='other-name'>{{foot.name}}</span>收入了¥<span>{{foot.money}}</span></div> 10 </div> 11 <div class='other-time'>{{foot.time}}分钟前</div> 12 </div> 13 </div> 14 </ion-slide> 15 </ion-slide-box>
属性使用:
auto-play="true" // 设置滑动框是否循环播放,如果 does-continue 为 true,默认也为 true。
slide-interval=3000 // 时间间隔 ;
show-pager="false" //是否显示焦点;
does-continue='true' //滑动框是否自动滑动;
pager-click= 'showCurrent($index)' //当点击页面(焦点)时,触发该表达式(如果shou-pager为true)。传递一个'索引'变量。
on-slide-changed ='slideCurrent($index)' // 当滑动时,触发该表达式。传递一个'索引'变量。
2. javascript:
update(); //更新滑动框
loop(true); //布尔值 true:
以上两个结合使用,解决幻灯片播放到最后一个不播放的问题:
angular.module('ionicApp', ['ionic']) .controller('SlideController', function($scope) { $scope.showCurrent= function(index) { console.log(index); // 打印当前点击的焦点的 index值; };
$scope.slideCurrent = function(index) {
console.log(index); // 滑动当前幻灯片的 index
}
})
enableSlide(false) //布尔值 禁止手动滑动;
使用方法如下: // 可以默认执行;
$ionicSlideBoxDelegate.update(); $ionicSlideBoxDelegate.loop(true); $ionicSlideBoxDelegate.enableSlide(false);
previous(); // 跳转到上一个滑块;如果在开始滑块,就循环;
next(); // 跳转到下一个滑块。如果在结尾就循环;
stop(); // 停止滑动。滑动框将不会再被滑动,直到再次启用;
currentIndex(); // 返回 当前滑块的索引数值;
slidesCount(); //返回 当前滑块的数目;
$getByHandle(handle); //参数 handle, string类型;
例如: $ionicSlideBoxDelegate.$getByHandle('my-handle').stop();