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 来进行向右滑还是向左滑的回调。
swiper监听左滑还是右滑动的更多相关文章
- js判断手指的上滑，下滑，左滑，右滑，事件监听
原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...
- Taro UI开发小程序实现左滑喜欢右滑不喜欢效果
前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...
- 如何在vue中监听scroll，从而实现滑动加载更多
首先需要明确3个定义: 文档高度:整个页面的高度 可视窗口高度:你看到的浏览器可视屏幕高度 滚动条滚动高度: 滚动条下滑过的高度 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底. ...
- uni-app中不使用scroll-view组件,监听页面滑直底部事件
最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...
- touch监听判断手指的上滑，下滑，左滑，右滑，事件监听
判断滑动的方向和距离,来实现一定的效果,比如返回上一页等等 <body> <script> $(function(){ //给body强制定义高度 var windowHeig ...
- vue+hammer.js完美实现长按、左滑，右滑等触控事件
移动端使用手指直接操作的方式大受用户欢迎,这其中就包括了单点.多点.长按.双击等方式. 这么多触控事件,如果开发者自己实现,会浪费大量的时间和精力,快来看看 hammer.js 让我们轻松了多少吧. ...
- ViewPager 滑动一半的判断方法以及左滑右滑判断
做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewp ...
- Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）
场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...
- 【右滑返回】滑动冲突 Scroller DecorView
基本思想 我们的滑动逻辑主要是利用View的scrollBy() 方法, scrollTo()方法和Scroller类来实现的 当手指拖动视图的时候,我们监听手指在屏幕上滑动的距离 利用View的sc ...
随机推荐
- QT运行出错：QObject::connect: Parentheses expected以及QObject::connect: No such slot ***
我在QGraphicsScene子类中添加了item的弹出菜单,并连接Action到槽函数,结果槽函数不起作用,输出:QObject::connect: No such slot *** C++ C ...
- C# toolstrip 上添加DateTimePicker Control控件
private void AddDTPtoToolstrip( n){DateTimePicker dtp = DateTimePicker;dtp.Width = 110;dtp.Format = ...
- java的this static public protected private abstract interface 在python的对应，java python一些区别
1.因为工作的原因,最近使用了三个多月的java作为主力语言.很早之前在菜鸟教程也看过java文档两遍,但实践少,处于能看懂写出来不流畅的状态(对于java必须要略懂,不能能看到就头疼跳过,因为现在百 ...
- [原]unity3d GLSL无法pc上显示
pc编写GLSL: Shader "Custom/GLSL" { Properties { _MainTex ("Base (RGB)", ...
- Spring JDBC入门
Spring将替我们完成所有使用JDBC API进行开发的单调乏味的.底层细节处理工作. 操作JDBC时Spring可以帮我们做这些事情: 定义数据库连接参数,打开数据库连接,处理异常,关闭数据库连接 ...
- ios开发之--首页 导航栏隐藏 下一级页面显示，pop回来显示白条
解决方法,在首页中实现如下两个方法,代码如下: -(void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated] ...
- C++ 默认构造函数小记
#include <string> #include <map> using namespace std; class A { public: A(string name):n ...
- date 类型转为varchar
select t.type_id as typeId, t.type_name as typeName, t.type_order as typeOrder, t.type_link as typeL ...
- 手机CPU
说起手机CPU的历史,笔者给大家提一个问题:"世界上第一款智能手机是什么呢?"相信很多人的答案是爱立信的R380或诺基亚的7650,但都不对,真正的首款智能手机是由摩托罗拉在200 ...
- Failure to transfer org.springframework.boot:spring-boot-starter-parent:pom:2.0.1.RELEASE from https://repo.maven.apache.org/maven2 was cached in the local repository, resolution will not be reattempt
第一次用 Spring Starter Project 创建一个Spring应用时,POM 文件报错: Project build error: Non-resolvable parent POM f ...