Question

我希望使用原生Javascript和AngularJS实现一些移动组件。

虽然我正在为AngularJS创建一个Pull To Refresh指令，但我在UL列表中使用了touchmove事件。我试图用自定义模型在列表顶部拉出一个隐藏的div来显示状态消息。

我在UL上使用touchmove事件通过更改div的CSS3翻译属性来创建拉动效果。我面临的问题是，在我完成触摸屏幕之后发生了转换，而不是在我拖动触摸时。

请提供帮助，并提供有关touchmove活动的更多详情。

Answer 1

触摸事件

首先，如果你在移动设备上工作并且对javascript有一点了解，你应该为你需要的特定事情编写自己的函数。所以不要使用像angular，jquery等等的库...它只是性能损失。

你需要的只是：

 document.addEventListener('touchstart',ts,false);
 document.addEventListener('touchmove',tm,false);
 document.addEventListener('touchuend',te,false);

＆安培;测试：

 document.addEventListener('mousedown',ts,false);//set mouseISDown to true
 document.addEventListener('mousemove',tm,false);//check if mouse is down
 document.addEventListener('mouseup',te,false);//set mouseISDown to false

<强> CSS

使用translate3d()激活gpu硬件加速。不只是translate()

由于您的问题不是非常具体，我现在无法添加更多信息，但是......

以下是使用触摸/鼠标移动的一些示例，它们可以帮助您

刷卡＆amp; fastclick

http://jsfiddle.net/uRFcN/

https://stackoverflow.com/a/17567696/2450730

径向菜单

http://jsfiddle.net/yX82S/

滑块

http://jsfiddle.net/LxX34/11/

一些UI元素

http://cocco.freehostia.com/scripts/SnapLightMT%20v0.2%20by%20cocco%20(1).html

尝试向左滑动主要内容或mousedown拖动。

码

http://cocco.freehostia.com/scripts/highlight.html

还有一个css技巧，允许你使用本机滚动，而不需要整个页面移动..所以你不必使用库来滚动。

CSS

.scrollable{-webkit-overflow-scrolling:touch;}
.scrollable,.scrollable>div{width:100%;height:100%;overflow:auto;}
.scrollable>div>div{min-height:101%;}

HTML

<div class="scrollable"><div><div></div></div></div>

使用常量DOM操作拖动/触摸移动事件

1 个答案: