ionic滑动框 ---轮播图(ion-slide-box) 的使用
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) 的使用的更多相关文章
- Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
- ionic3 slides轮播图手动滑动后无法自动播放问题
我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...
- 2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...
- 微信小程序之 Swiper(轮播图)
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图
我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 import {ViewChi ...
- Flutter轮播图
前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果.Flutter中的动画组件主要分为两类: 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如An ...
- 使用JS实现轮播图的效果
其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...
- javascript效果:手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- xml解析(4)
本节要点: DOM解析方式 SAX解析方式 DOM4J对XML的解析 XML用于将数据组织起来,形成文档用于存储和传输: 更多时候我们需要的是将xml中的数据解析出来,甚至是在程序中动态生成xml. ...
- mysql 常用sql语句 二
mysql 查询 基本查询 select * from users; 去重 select distinct(name),high from users order by high desc; ## 注 ...
- linux启动失败
如图 1.开机界面 按 e 键 2.选择第二个进入就好了 根据网上说的修改kernel 配置 加上 enforcing=0 无效 1.进入界面后再按 e 键 3.选择第二个按e键进入编辑 界面 每次 ...
- Spark Streaming VS Flink Streaming
引自:https://www.slideshare.net/datamantra/introduction-to-flink-streaming
- 《高性能MySQL(第3版)》【PDF】下载
内容简介 <高性能mysql(第3版)>是mysql 领域的经典之作,拥有广泛的影响力.第3版更新了大量的内容,不但涵盖了最新mysql5.5版本的新特性,也讲述了关于固态盘.高可扩展性设 ...
- Swift 开源项目练习应用
小的View.动画实现练习 拥有着苹果先天生态优势的Swift自发布以来,各种优秀的开源项目便层出不穷.本文作者站在个人的角度,将2014年Swift开源项目做了一个甄别.筛选,从工具.存储.网络.界 ...
- android 串口开发第二篇:利用jni实现android和串口通信
一:串口通信简介 由于串口开发涉及到jni,所以开发环境需要支持ndk开发,如果未配置ndk配置的朋友,或者对jni不熟悉的朋友,请查看上一篇文章,android 串口开发第一篇:搭建ndk开发环境以 ...
- 框架原理第二讲,RTTI,运行时类型识别.(以MFC框架讲解)
框架原理第二讲,RTTI,运行时类型识别.(以MFC框架讲解) 一丶什么是RTTI,以及RTTI怎么设计 通过第一讲,我们知道了怎么样升成一个窗口了,以及简单的消息循环. 第二讲则是主要讲解RTTI ...
- ES6常用语法
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
- Docker容器中开始.NETCore之路
一.引言 开始写这篇博客前,已经尝试练习过好多次Docker环境安装,.Net Core环境安装了,在这里替腾讯云做一个推广,假如我们想学习.练手.net core 或是Docker却苦于没有开发环境 ...