博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
swiper控件(回调函数)
阅读量:5172 次
发布时间:2019-06-13

本文共 1470 字,大约阅读时间需要 4 分钟。

  属性:

swiper.slides.length

 

1、onInit(swiper): function(){...}

      swiper初始化完成,会调回调  onInit 方法 获取当前swiper索引值

当设置属性值

initialSlide: 1
//alert(swiper.activeIndex);提示Swiper的当前索引 为: 1

通过设置该属性,指定当前swiperSlide位置

 

2、onTouchStart \ onTouchMove \ onTouchEnd 

监听当前slide滑动状态

 

3、onSlideChangeStart 、 onSlideChangeEnd

回调函数,swiper从当前slide开始过渡到另一个slide时执行。触摸情况下,如果释放slide时没有达到过渡条件而回弹时不会触发这个函数,此时可用。

可接受swiper实例作为参数,输出的activeIndex是过渡后的slide索引。

 

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. 导航切换可参考手动触摸释放阶段

 

6、onClick \ onTap \ onDoubleTap (swiper, event): function(){...}

7、onReachBeginning \ onReachEnd (swiper): function(){...}

8、onDestroy(swiper): function(){...}

 

设为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

你可能感兴趣的文章
Confluence 6 升级以后
查看>>
用JS实现版面拖拽效果
查看>>
二丶CSS
查看>>
《avascript 高级程序设计(第三版)》 ---第二章 在HTML中使用Javascript
查看>>
JS一些概念知识及参考链接
查看>>
TCP/IP协议原理与应用笔记24:网际协议(IP)之 IP协议的简介
查看>>
SAP HANA开发中常见问题- 基于SAP HANA平台的多团队产品研发
查看>>
游戏中的心理学(一):认知失调有前提条件
查看>>
WHAT I READ FOR DEEP-LEARNING
查看>>
【Ruby】Ruby在Windows上的安装
查看>>
Objective C 总结(十一):KVC
查看>>
BZOJ 3747 洛谷 3582 [POI2015]Kinoman
查看>>
vue实战(7):完整开发登录页面(一)
查看>>
Visual Studio自定义模板(二)
查看>>
【Mood-20】滴滤咖啡做法 IT工程师加班必备 更健康的coffee 项目经理加班密鉴
查看>>
读《构建之法-软件工程》第四章有感
查看>>
使用 Printf via SWO/SWV 输出调试信息
查看>>
.net 分布式架构之分布式锁实现(转)
查看>>
Problem E: Automatic Editing
查看>>
SpringBoot 使用 MyBatis 分页插件 PageHelper 进行分页查询
查看>>