V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lipenglong
V2EX  ›  问与答

[前端]手机浏览器手势滑动问题(内附有测试地址,手机端打开)

  •  
  •   lipenglong · 2016-04-09 19:55:11 +08:00 · 2624 次点击
    这是一个创建于 3151 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用的手写的原生 JS , touch 事件写的。想通过判断手势来做一些滑动,但是会有一些问题。比如手势是下滑的,但是代码结果是左右滑动(因为触摸中,上下滑动长度 < 左右滑动长度)。

    做的功能是:左右滑动的时候侧边栏出来; 非左右滑动的时候,正常手机浏览器滚动 问题:手势向上滑动, 并且滑动比较快的时候,侧边栏会滑出来(正常逻辑是不会滑出来的) 想过的解决办法:监测手机浏览器是否是滚动状态, 但是没找到这个方法。

    链接地址:http://penglongli.github.io/Test/
    需要手机端预览

    3 条回复    2016-04-10 03:10:50 +08:00
    xiaocsl
        1
    xiaocsl  
       2016-04-09 22:59:19 +08:00
    问题没你想的那么难.只是单纯的代码逻辑有问题.

    var distanceX = endX - startX;
    if(distanceX < 0)

    这两行可以看出,你就做了非常简单的判断,一点 X 坐标有变动就执行.
    这样,你不管怎么滑动,只要开始时的 X 坐标和结束时的 X 坐标有变化就触发了.

    解决办法也不麻烦.完善一下,判断逻辑.
    有两组 x,y 坐标就可以判断出角度.然后根据角度来判断执行什么代码即可.
    xiaocsl
        2
    xiaocsl  
       2016-04-09 23:02:01 +08:00
    另外..移动端就扔掉 jQuery 吧.
    换成 Zepto.js 吧
    Lpl
        3
    Lpl  
       2016-04-10 03:10:49 +08:00 via Android
    @xiaocsl 判断角度的话是大于某个限定读书的时候才判定为左右移动么ヽ(´・д・`)ノ
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3741 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 04:20 · PVG 12:20 · LAX 20:20 · JFK 23:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.