<!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 来进行向右滑还是向左滑的回调。

swiper监听左滑还是右滑动的更多相关文章

  1. js判断手指的上滑，下滑，左滑，右滑，事件监听

    原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...

  2. Taro UI开发小程序实现左滑喜欢右滑不喜欢效果

    前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...

  3. 如何在vue中监听scroll，从而实现滑动加载更多

    首先需要明确3个定义: 文档高度:整个页面的高度 可视窗口高度:你看到的浏览器可视屏幕高度 滚动条滚动高度: 滚动条下滑过的高度 当 文档高度 = 可视窗口高度 + 滚动条高度  时,滚动条正好到底. ...

  4. uni-app中不使用scroll-view组件,监听页面滑直底部事件

    最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...

  5. touch监听判断手指的上滑，下滑，左滑，右滑，事件监听

    判断滑动的方向和距离,来实现一定的效果,比如返回上一页等等 <body> <script> $(function(){ //给body强制定义高度 var windowHeig ...

  6. vue+hammer.js完美实现长按、左滑，右滑等触控事件

    移动端使用手指直接操作的方式大受用户欢迎,这其中就包括了单点.多点.长按.双击等方式. 这么多触控事件,如果开发者自己实现,会浪费大量的时间和精力,快来看看 hammer.js 让我们轻松了多少吧. ...

  7. ViewPager 滑动一半的判断方法以及左滑右滑判断

    做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewp ...

  8. Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）

    场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...

  9. 【右滑返回】滑动冲突 Scroller DecorView

    基本思想 我们的滑动逻辑主要是利用View的scrollBy() 方法, scrollTo()方法和Scroller类来实现的 当手指拖动视图的时候,我们监听手指在屏幕上滑动的距离 利用View的sc ...

随机推荐

  1. 使用Eclipse构建Maven项目

    http://blog.csdn.net/qjyong/article/details/9098213

  2. 五大行获央行5000亿SLF 相当于降准0.5%

    人民网北京9月17日电 (吕骞)据新浪财经报道,9月16日收盘后,市场传央行当天对五大行进行5000亿SLF操作,性质类同基础货币的投放,近似全面降准0.5个百分点.国泰君安.国信等数家机构晚间证实传 ...

  3. java stream Api

    Stream的简单使用 Stream的使用分为两种类型: Intermediate,一个Stream可以调用0到多个Intermediate类型操作,每次调用会对Stream做一定的处理,返回一个新的 ...

  4. android5.1移植记录

    应用能够配置Android系统的各种设置,这些设置的默认值都是由frameworks中的SettingsProvider从数据库中读取的frameworks/base/packages/Setting ...

  5. c++单例设计模式---17

    原创博文,转载请标明出处--周学伟  http://www.cnblogs.com/zxouxuewei/ 全局变量在项目中是能不用就不用的,它是一个定时炸弹,是一个不安全隐患,特别是在多线程程序中, ...

  6. Java实现经理与员工的差异

    对于在同一家公司工作的经历和员工而言,两者是有很多共同点的.例如,每个月都要发工资,但是经理在完成目标任务后,还会获得奖金.此时,利用员工类来编写经理类就会少写很多代码,利用继承技术可以让经理类使用员 ...

  7. Java -- 异常的捕获及处理 -- Java的异常处理机制

    7.1.4 Java的异常处理机制 在整个Java的异常处理中,实际上也是按照面向对象的方式进行处理,处理的步骤如下: ⑴ : 一旦产生异常,则首先会产生一个异常类的实例化对象. ⑵ : 在try语句 ...

  8. Spring @Scheduled定时任务动态修改cron参数

    在定时任务类上增加@EnableScheduling注解,并实现SchedulingConfigurer接口.(注意低版本无效) 设置一个静态变量cron,用于存放任务执行周期参数. 另辟一线程,用于 ...

  9. 【代码审计】TuziCMS_v3.0_任意文件删除漏洞分析

      0x00 环境准备 TuziCMS官网:http://www.tuzicms.com/ 网站源码版本:TuziCMS_v3.0_20161220 程序源码下载:http://www.tuzicms ...

  10. vmware下虚拟机不能上网问题解决

    这个问题困扰了好久,vmware下装的虚拟机可以通过DHCP获取单独IP,但当用到管控较严格的环境,需要它与主机共享IP时,就不好使了. 今天在一篇文章中找到答案,如下图,windows系统中要启动V ...