zoukankan      html  css  js  c++  java
  • 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变化尺寸前后触发。

  • 相关阅读:
    多线程——newFixedThreadPool线程池
    mysql SQL优化之嵌套查询-遁地龙卷风
    mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风
    mysql存储过程编写-入门案例-遁地龙卷风
    编程轶事-java中的null-遁地龙卷风
    正逆向思维-编程轶事-遁地龙卷风
    MyBatis处理一行数据-MyBatis使用sum语句报错-MyBatis字段映射-遁地龙卷风
    MyBatis框架在控制台打印Sql语句-遁地龙卷风
    3d转换-正方体-Html5Css3-遁地龙卷风
    突破瓶颈-遁地龙卷风
  • 原文地址:https://www.cnblogs.com/congxueda/p/7389045.html
Copyright © 2011-2022 走看看