zoukankan      html  css  js  c++  java
  • swiper监听左滑还是右滑动

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
    *{margin:0px auto;}
    .swiper-slide{width: 100%; height: 200px; background:#ddd;}
    </style>
    </head>
    <body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>
    
    <!-- Swiper JS -->
    <script src="./js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        on:{
            touchEnd:function(event){
                console.log('触摸停止');
                getDecoration();
            },        
            slidePrevTransitionEnd:function(){
                console.log('pre');
            },
            slideNextTransitionEnd:function(){
                console.log('next');
            },
        }
    });
    function getDecoration(){
        console.log(swiper.swipeDirection);
    };
    </script>
    </body>
    </html>

    这里注意:通过判断 swiper.swipeDirection 可以判断左滑,还是右滑,但是这个方法,目前只能在 touchEnd  后进行回调。

    所以我们可以在 slidePreTransitionEnd 和 slideNextTransitionEnd 来进行向右滑还是向左滑的回调。

  • 相关阅读:
    Linux之wget命令
    Markdown语法
    Windows实时预览markdown
    Python基础教程,Python入门教程(非常详细)
    【转载】UNICODE与ASCII的区别
    Python之虚拟环境
    Linux文件系统管理
    Linux权限管理
    linux用户和用户组管理
    linux 软件安装
  • 原文地址:https://www.cnblogs.com/e0yu/p/10214920.html
Copyright © 2011-2022 走看看