ionic ion-slide-box学习笔记整理

slideBox常用的方法 整理:

可选的属性

does-continue - 是否循环切换 true/false;

auto-play - 是否自动播放 true;

slide-interval - 自动播放的间隔时间,默认为4000ms

show-pager - 是否显示分页器 true/false;


事件及变量

pager-click - 分页器点击事件 pager-click属性应当设置为一个当前作用域上的函数调用表达式,这个函数将被 传入被点击的分页按钮对应的幻灯页序号:index

      使用例子:

        pager-click="go(index)"

        $scope.go = function(index){  
             $ionicSlideBoxDelegate.slide(index);  
        }


on-slide-changed - 幻灯页切换事件 on-slide-changed属性应当设置为一个当前作用域上的函数调用表达式,这个函数 将被传入当前幻灯页的序号:$index active-slide - 当前幻灯页索引

     使用例子:

      on-slide-changed="go_changed(index)"

      $scope.go_changed=function(index){  
          console.log(index);  
      }

active-slide属性应当设置为一个当前作用域上的变量,当幻灯片切换时,这个变量同步的反应当前的幻灯页索引号,例如:active-slide="index";


脚本接口: $ionicSlideBoxDelegate:

update() - 重绘幻灯片 有时,比如当容器尺寸发生变化时,需要调用update()方法重绘幻灯片,当数据源从后台动态获取时候最好都加上这个事件,不然幻灯片的显示会出现各种乱,使用例子:

   数据prizeList是从后台动态获取到的一个数组,监听当这个数组有变化时候调用update()重绘幻灯片,

    $scope.$watch("prizeList",function(){
          $ionicSlideBoxDelegate.update();
      })

slide(to[,speed]) - 切换到指定幻灯页 参数to表示切换的目标幻灯页序号,参数speed是可选的,表示以毫秒为单位的切换时间,使用列子:

    $scope.go = function(index){  
    $ionicSlideBoxDelegate.slide(index);  
  }

enableSlide([shouldEnable]) - 幻灯片使能 参数shouldEnable的允许值为:true | false ;

previous() - 切换到前一张幻灯页

next() - 切换到后一张幻灯页

currentIndex()- 获得当前幻灯页的序号

slideCount()- 获得全部幻灯页的数量







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值