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

  • 相关阅读:
    关于oracle小数和整数混合排序错误问题
    oracle 格式转换 <行转列列转行>
    Postgresql 配置文件详解
    Postgresql 同步流复制
    Postgresql 安装
    mongodb 复制集 维护小结
    mongodb 角色总结
    mongodb 安全认证
    SqlServer实时数据同步到mysql
    批量修改在索引中增加字段
  • 原文地址:https://www.cnblogs.com/congxueda/p/7389045.html
Copyright © 2020-2023  润新知