博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
swiper 最后一页继续滑动跳转问题
阅读量:4965 次
发布时间:2019-06-12

本文共 1950 字,大约阅读时间需要 6 分钟。

 

 

 

/*  * swiper初始化  */ var swiper1 = new Swiper('.swiper1', {    loop:false,    grabCursor: true,    onSlideChangeStart: function(){        var index=swiper1.activeSlide;         $(".p1").html(index+1);         swiper2.swipeTo (index);         },   onTouchEnd:function(){   /*手指滑动时,判断手指滑动的方向*/     // alert(swiper1.slides.length);      goprev();  /*上一篇*/      gonext();  /*下一篇*/  }});

 

/* * 滑到上一篇 */function goprev(){    var startX, startY, moveEndX, moveEndY, X, Y;    $(".swiper1 .swiper-slide:first").on("touchstart", function(e) {       // e.preventDefault();        startX = e.originalEvent.changedTouches[0].pageX,        startY = e.originalEvent.changedTouches[0].pageY;    });    $(".swiper1 .swiper-slide:first").on("touchmove", function(e) {       // e.preventDefault();        moveEndX = e.originalEvent.changedTouches[0].pageX,        moveEndY = e.originalEvent.changedTouches[0].pageY,        X = moveEndX - startX,        Y = moveEndY - startY;         if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {  //从左侧向右滑动             $.afui.loadContent("#article",false,false,"slide");        }    });  }/* * 滑到下一篇 */function gonext(){    var startX, startY, moveEndX, moveEndY, X, Y;    $(".swiper1 .swiper-slide:last").on("touchstart", function(e) {       // e.preventDefault();        startX = e.originalEvent.changedTouches[0].pageX,        startY = e.originalEvent.changedTouches[0].pageY;    });    $(".swiper1 .swiper-slide:last").on("touchmove", function(e) {       // e.preventDefault();        moveEndX = e.originalEvent.changedTouches[0].pageX,        moveEndY = e.originalEvent.changedTouches[0].pageY,        X = moveEndX - startX,        Y = moveEndY - startY;         if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {  //从右侧向左滑动             $.afui.loadContent("#article",false,false,"slide");        }    });  }

 

 

 


判断手指滑动的方向:

 

    
Document 移动端,手指滑动屏幕查看效果。

 

转载于:https://www.cnblogs.com/shimily/articles/4460045.html

你可能感兴趣的文章
9、总线
查看>>
Git 笔记 - section 1
查看>>
2018 Multi-University Training Contest 10 - Count
查看>>
HDU6203 ping ping ping
查看>>
《人人都是产品经理》书籍目录
查看>>
如何在git bash中运行mysql
查看>>
OO第三阶段总结
查看>>
构建之法阅读笔记02
查看>>
DataTable和 DataRow的 区别与联系
查看>>
检索COM 类工厂中CLSID 为 {00024500-0000-0000-C000-000000000046}的组件时失败
查看>>
mysql数据库中数据类型
查看>>
Fireworks基本使用
查看>>
Linux 标准 I/O 库
查看>>
.net Tuple特性
查看>>
Java基础常见英语词汇
查看>>
nginx启动、关闭命令、重启nginx报错open() "/var/run/nginx/nginx.pid" failed
查看>>
BZOJ 3097 Hash Killer I
查看>>
UINavigationController的视图层理关系
查看>>
html阴影效果怎么做,css 内阴影怎么做
查看>>
宏观经济
查看>>