1. html :

  <ion-slide-box auto-play="true"   slide-interval=3000 show-pager="false" does-continue='true'>
<ion-slide ng-repeat='foot in foots' pager-click='showCurrent($index)'>
<div class='foot-item'>
<div class='item-box' flex="main:justify cross:center">
  <div class='item-info' flex="main:justify cross:center">
  <div class='foot-img'>
<img ng-src="{{foot.src}}" alt="user">
</div>
<div class='other-income'><span class='other-name'>{{foot.name}}</span>收入了¥<span>{{foot.money}}</span></div>
</div>
<div class='other-time'>{{foot.time}}分钟前</div>
</div>
</div>
</ion-slide>
</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();


ionic滑动框 ---轮播图(ion-slide-box) 的使用的更多相关文章

  1. Vue2 轮播图组件 slide组件

    Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...

  2. ionic3 slides轮播图手动滑动后无法自动播放问题

    我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...

  3. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  4. 微信小程序之 Swiper(轮播图)

    1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...

  5. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  6. 解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图

    我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 import {ViewChi ...

  7. Flutter轮播图

    前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果.Flutter中的动画组件主要分为两类: 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如An ...

  8. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  9. javascript效果:手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 看看android基础知识,谁帮我作答

    无论怎么着,了解一点android的基本知识还是有必要的,就当开阔一些自己的眼界吧. .. . android的四大功能组件是_activity_,_service_,_BroadcastReceiv ...

  2. Android查缺补漏--BroadcastReceiver的类型与使用

    Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...

  3. CI学习 CCNET Config 第一天

    CCNet的整体结构就是一个Xml文档,根元素就是cruisecontrol,具体的代码块如下所示: <cruisecontrol xmlns:cb="urn:ccnet.config ...

  4. mac brew install nginx遇到的坑

    默认使用 brew install nginx 出现了一下的错误: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: ...

  5. InfluxDB:cannot use field in group by clause

    最近在使用InfluxDB时,发现一个很奇怪的问题,一个本来正常的功能,做了一次改动后,就不能正常显示了. 一.查询语句 SELECT MEMORY FROM "ACM_PROCESS_MO ...

  6. JSON Schema 校验实例

    JSON Schema 简介 JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. ...

  7. MySQL必知必会笔记

    数据库和表的增删改 创建数据库 CREATE DATABASE 数据库名; # mysql中还可使用如下语句 CREATE SCHEMA 数据库名; 数据库选择 USE 数据库名; 创建表 creat ...

  8. Python学习日记:day9--------函数

    初识函数 1,自定义函数 s ='内容' #自定义函数 def my_len():#自定义函数没有参数 i =0 for k in s: i+=1 print(i) return i #返回值 my_ ...

  9. MySQL sql语句获取当前日期|时间|时间戳

    1.1 获得当前日期+时间(date + time)函数:now() mysql> select now();+———————+| now() |+———————+| 2013-04-08 20 ...

  10. 大赛获奖选手专访 | 冷燕冰:最佳设计奖TIMING里的时机和时序

    Mockplus三周年原型设计大赛,从筹备到11月21日完美落幕,50余天的时光,已成为过去.这场近千人参赛的原型设计大赛,我想,无论是于主办方,于参赛选手,于专家评委,还是于每一个关注和参与的人,都 ...