swiper控件(回调函数)
属性:
swiper.slides.length
1、onInit(swiper): function(){...}
swiper初始化完成,会调回调 onInit 方法 获取当前swiper索引值
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
//Swiper初始化了
//alert(swiper.activeIndex);提示Swiper的当前索引
}
})
</script>
当设置属性值
initialSlide: 1
//alert(swiper.activeIndex);提示Swiper的当前索引 为: 1
通过设置该属性,指定当前swiperSlide位置
2、onTouchStart \ onTouchMove \ onTouchEnd
监听当前slide滑动状态
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTouchStart: function(swiper,even){
alert('事件触发了;');
}
})
</script>
3、onSlideChangeStart 、 onSlideChangeEnd
回调函数,swiper从当前slide开始过渡到另一个slide时执行。触摸情况下,如果释放slide时没有达到过渡条件而回弹时不会触发这个函数,此时可用onTransitionStart。
可接受swiper实例作为参数,输出的activeIndex是过渡后的slide索引。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
alert(swiper.activeIndex);
}
})
</script>
4、onImagesReady
回调函数,所有内置图像加载完成后执行,同时“updateOnImagesReady”需设置为“true’。
内置标签内使用 img
5、onTransitionStart \ onTransitionEnd
回调函数,过渡开始时触发,接受Swiper实例作为参数。
Swiper运作原理
Swiper常用运作方式有两种:手动触摸切换或者导航切换(前进后退按钮,键盘控制,分页器,内置方法slideTo等)
1. 手动触摸切换拖动阶段Swiper根据手势位置实时设定wrapper的位移(onSetTranslate),释放拖动时Swiper会设定一次wrapper自由过渡(onSetTranslate、onSetTransition、onTransitionStart、onSlideChangeStart)。速度为speed直到过渡结束(onTransitionEnd、onSlideChangeEnd)。
2. 导航切换可参考手动触摸释放阶段
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTransitionStart: function(swiper){
...
}
})
</script>
6、onClick \ onTap \ onDoubleTap (swiper, event): function(){...}
7、onReachBeginning \ onReachEnd (swiper): function(){...}
8、onDestroy(swiper): function(){...}
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onDestroy: function(swiper){
alert('你销毁了Swiper;');
}
})
$('#btn1').click(function(){
mySwiper.destroy(false);
})
</script>
设为false则不销毁Swiper对象,默认为true。
9、onAutoplay \ onAutoplayStart \ onAutoplayTop
10、onLazyImageLoad \ onLazyImageReady
11、onSlideNextStart \ onSlideNextEnd 下滑触发(开始及结束)
12、onSlidePrevStart \ onSlidePrevEnd 上滑动(开始及结束时触发)
13、onScroll:function(swiper){...} 需要设置 mousewheelControl : true
14、onKeyPress 在允许键盘控制状态下,按键盘时会触发这个函数。 keyboardControl:true
15、onBeforeResize \ onAfterResize 回调函数:当swiper跟随windows变化尺寸前后触发。
swiper控件(回调函数)的更多相关文章
- nj04---事件回调函数
一.回调函数 1.异步式读取文件 var fs=require('fs'); fs.readFile('file.txt','utf-8',function(err,data){ if(err){ c ...
- WPF 分页控件的实现 -用户控件
效果图:
- 2016.1.19 DEV Express控件GirdControl使用
103.GridControl中添加Button RunDesigner,添加一列,设置对应字段FiledName,ColumnEdit选择ButtonEdit,此时默认风格像下拉框,需调整属性: 在 ...
- cocos2dx基础篇(9) 滑块控件CCControlSlider
[3.x] (1)去掉 “CC” (2)对象类 CCObject 改为 Ref (3)CCControlEvent 改为强枚举 Control::EventType (4)CCControlEvent ...
- MFC 设置控件事件对应的函数
在项目中,右击你想设置的控件,打开属性. 然后找到:控件事件,如果在Visual Studio 2015中操作,显示如图: 然后,以设定单击事件为例: 点击右边的三角,选择 <Edit Code ...
- 《zw版·delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版
<zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...
- 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表
<zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...
- emwin之错误使用控件函数导致死机现象
@2018-10-15 导致死机的代码示例如下 /** * @brief widget ID define * @{ */ #define ID_WINDOW_0 (GUI_ID_USER + 0x0 ...
- vs2010开发activex(MFC)控件/ie插件(三),js调用ocx控件的接口函数
原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50802280 js调用ocx控件的接口函数,先看demo效果: 简单测试过程 ...
随机推荐
- R: 基本的数学运算
################################################### 问题:基本数学运算 18.4.30 R语言用于初等数学的计算,都怎么表示??加减乘除.余数. ...
- c++ 子类切勿重新定义父类 non-virtual函数
子类如果重新定义了父类的non-virtual函数则不会有多态效果. 为方便描述,这里的方法和继承方式都用public.至于原因嘛,你懂的! 1:子类直接继承父类方法 class BaseOption ...
- 8.View类
Basic Concepts 在Modle/View 结构中,View从Model中提取数据,并显示给用户.View显示数据的方式不一定与Model中数据排列方式相同,也可能与底层数据结构完 ...
- sed编辑器使用(转)
1.Sed简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后, ...
- dd相关命令
用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. if= 输入文件或设备名称 eg:if=u-boot-with-spl.bin of=输出文件或设备名称 eg:of=/dev/sdb bs ...
- 《Linux内核设计与实现》读书笔记(六)- 内核数据结构
内核数据结构贯穿于整个内核代码中,这里介绍4个基本的内核数据结构. 利用这4个基本的数据结构,可以在编写内核代码时节约大量时间. 主要内容: 链表 队列 映射 红黑树 1. 链表 链表是linux内核 ...
- tensorboard的安装及遇到的问题
1 安装tensorboard 打开anaconda prompt,键入下边的命令: activate tensorflow pip install tensorboard 当执行“activate ...
- 理解CNN中的通道 channel
在深度学习的算法学习中,都会提到 channels 这个概念.在一般的深度学习框架的 conv2d 中,如 tensorflow .mxnet ,channels 都是必填的一个参数. channel ...
- EasyUi取消选中表格的所有行
- Windows10远程报错:由于CredSSP加密Oracle修正(ps:Win10家庭版)
Windows10远程桌面连接 报错信息 : 网上找到方法 但是奈何是 "Win10家庭版" 不能使用这个办法,具体操作可以看最后的引用链接 !!!! 策略路径:“计算机配置”-& ...