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变化尺寸前后触发。

转载于:https://www.cnblogs.com/congxueda/p/7389045.html

swiper控件（回调函数）相关推荐

【第3版emWin教程】第49章 emWin6.x的AppWizard创建控件回调消息
教程不断更新中:第3版emWin教程和ThreadX GUIX教程开工,双管齐下,GUIX更新至第28章,emWin更新至第50章(2021-10-01) - uCOS & uCGUI &am ...
HQChart使用教程5- K线图控件操作函数说明
K线图控件操作函数说明周期切换切换股票切换指标增加一个窗口指标 AddIndexWindow indexName option 增加一个自定义通达信脚本指标窗口 AddScriptIndexW ...
Windows SDK笔记(三)：定制控件消息处理函数
From: http://www.vckbase.com/document/viewdoc/?id=1009 一.概述控件的消息处理函数是由系统定义好了的,通常情况下,不需要自己提供. 但当需要对控 ...
定制控件消息处理函数
Windows SDK笔记(三):定制控件消息处理函数作者:冯明德一.概述控件的消息处理函数是由系统定义好了的,通常情况下,不需要自己提供. 但当需要对控件进行特殊控制时,可以提供一个消息处理函 ...
数据窗口控件的函数Describe()
Describe() 功能:返回数据窗口控件结构方面的指定信息包括DataWindow 对象以及数据窗口对象中其他对象的属性取值数据窗口中的每个列每个标题等等都是对象各自都有一组描述其特 ...
【第3版emWin教程】第55章 emWin6.x按钮Button控件自定义回调函数，实现各种按钮效果
教程不断更新中:链接第55章 emWin6.x按钮Button控件自定义回调函数,实现各种按钮效果本章节为大家讲解按钮控件自定义回调函数,通过其回调函数就可以实现各种按钮效果.这方面的 ...
C# 静态函数调用窗体控件
C# 静态函数调用窗体控件回调函数方法是静态函数,需要调用窗体控件,赋值或取值. 定义: public static Form1 mainFrm; mainFrm = this; public pa ...
VC++控件的汉字及颜色的编程控制
VC++中static text字体改变窗口都有2个和字体有关的函数: CWnd::GetFont()和SetFont(CFont*, BOOL); 1)CFont* pFont = m_stati ...
CATIA二次开发CAA实现MFC树形控件的方法研究
CATIA使用CAA二次开发的时候,如果需要对树形数据对象实现管理,使用树形控件是非常好的选择.但是,CAA本身提供的控件较少,多数情况无法较好地满足项目要求,如果你的水平足够高,也可以使用CATNa ...
【第3版emWin教程】第50章 emWin6.x的AppWizard使用控件经典回调方式
教程不断更新中:第3版emWin教程和ThreadX GUIX教程开工,双管齐下,GUIX更新至第28章,emWin更新至第50章(2021-10-01) - uCOS & uCGUI &am ...

swiper控件（回调函数）

swiper控件（回调函数）相关推荐

最新文章

热门文章