Zepto的SwipeUp 在 android 和微信 的解决方案
时间:2016-04-19 22:20:09
作者:zhongxia
问题解决方案:
Q:为什么swipeUp和swipeDown在手机测试不成功??
A: 把这段代码添加到 zepto.min.js 的最上面
document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
这段代码还是有问题: 内容太长出现滚动条之后, 没有办法滚动
做公司的一个手机站,发现zepto的touch.js在安卓上的兼容性有bug,主要是在微信上无法触发swipe*事件,而且这个 bug 作者不愿意修,理由是:我特么没有安卓设备。发生这种bug的原因大概是安卓设备上
网上找到了一个大神的初步解决方案:在touch.js中加一段代码:
.on('touchmove MSPointerMove pointermove', function(e){ if((_isPointerType = isPointerEventType(e, 'move')) && !isPrimaryTouch(e)) return firstTouch = _isPointerType ? e : e.touches[0] cancelLongTap() touch.x2 = firstTouch.pageX touch.y2 = firstTouch.pageY deltaX += Math.abs(touch.x1 - touch.x2) deltaY += Math.abs(touch.y1 - touch.y2) /** * 修复 android 4.4 swipe 事件 * https://github.com/madrobby/zepto/issues/315#issuecomment-8386027 */ if (touch.x2 && Math.abs(touch.x1 - touch.x2) > 10) e.preventDefault() })
虽然说这点代码, 但是这段代码要放在什么地方呢?
加载 自执行函数里面的 $(window).on 的绑定事件上
DEMO: http://zhongxia245.github.io/demo/ZeptoTouch/index.html
可以在微信扫码,打开试一下,Android 的浏览器同样可以试一下