首页 » 前端 » 正文

js获取触摸滚动

| 前端 | | 4 条评论 | 2276 views

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    $("body").on("touchstart", function(e) {
        //e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    $("body").on("touchmove", function(e) {
        //e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;
        console.log(startY)
        if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {  //从左侧向右滑动
            console.log("left to right");
        }
        else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {  //从右侧向左滑动
            console.log("right to left");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {  //从上方向下滑动
            console.log("top to bottom");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {  //从下方向上滑动
            console.log("bottom to top");
        }
        else{
            console.log("just touch");
        }
    });

现在在做一个赛程页面，选择时间，相应的结果也要更改，采用了swiper（左右切换），滚动到底部，要自动切换到下一页，需要获取触摸事件，本来想采用上面的方法，但是不太好用，后来在swiper自己的onTouchMove相关方法中进行了判断，基本完成，随后会把这个效果放到git上

实现：1，切换时间，内容跟着切换；2，左右滑动内容，日期也跟着切换；3，内容滑动到顶部，切换前一天，滑动到底部，切换第二天；4，实现了切换过程中，不影响上一次上下滚动的位置

本文共 4 个回复

  • QQ707028215 2016/08/11 16:18

    博客不错，嘎嘎！

  • 蒂欧娜 2016/10/16 08:03

    来看看，学习学习！！

  • QQ-41790047 2016/10/20 17:18

    学习带来乐趣，谢谢博主！

  • 挖宝网 2016/12/26 10:38

    没什么好说的，提前祝博主新年快乐！

Comments are closed.