<!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. Python的Beautiful Soup简单使用

    Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据 Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能 它是一个工具箱, ...

  2. Android开发学习笔记-GridView的动态显示

    1.添加GridItem布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  3. 【机翻】Deep Plug-and-Play Super-Resolution for Arbitrary

    论文 (PDF) Deep Plug-and-Play Super-Resolution for Arbitrary Blur Kernels https://www.researchgate.net ...

  4. repo_folder

    -- Create table create table REPO_FOLDER ( UUID ) not null, VALID ) not null, CREATE_TIME ) not null ...

  5. PMP考试相关

    知识点:http://www.cnblogs.com/allenblogs/tag/PMbook/ 读书笔记: http://www.cnblogs.com/lensin/category/45538 ...

  6. [Unity官方文档翻译]Primitive and Placeholder Objects Unity原生3D物体教程

    Primitive and Placeholder Objects 原始的基础物体 Unity can work with 3D models of any shape that can be cre ...

  7. POJ 3258 River Hopscotch(二分法搜索)

    Description Every year the cows hold an event featuring a peculiar version of hopscotch that involve ...

  8. (转)base64编码是怎么工作的?

    按:在PHP中级班的课堂上,有位同学问这样一个问题:“我在用 base64_encode 对用户名进行编码时,会出来等号,是不是可以去掉?”跟我来看完这篇文章,答案即揭晓. 1: 为什么需要base6 ...

  9. 解决win10休眠后无法唤醒

    在控制面板-电源选项-编辑计划设置-高级电源设置中把"睡眠"的选项中休眠调整为从不,"电源按键和盖子"选项中也都设为睡眠,这样使得无论你是使用电池还是电源,系统 ...

  10. php查找之二分查找

    二分查找,往往是针对有序的数组进行查找,我们假设一个序列是数组有序,然后给定一个数字,查出它应该在这个数组中的排序位置 百度百科中讲到 二分查找也称折半查找(Binary Search),它是一种效率 ...