- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在创建一个专门针对手机(主要是 iPhone,但即将推出 Android 和 WP...)的网络应用程序。
其中一个屏幕包含一个滚动的项目列表。我希望列表的行为类似于内置的 iOS 邮件应用程序。
换句话说...
所以 - 弄清楚用户的意图很重要,这意味着我可能需要阻止任何响应,直到我弄清楚用户是垂直还是水平移动她的手指。
只需在列表容器上设置这些 CSS 样式...
overflow-y: auto;
-webkit-overflow-scrolling: touch;
...我得到上面的#1 和#2。所以,我需要弄清楚如何实现 #3。
我的第一个想法是实现这样的东西(伪代码)...
touchstart
事件监听器。在回调中,存储用户开始触摸位置的 x 坐标和 y 坐标。touchmove
事件监听器。在回调中,计算出用户的手指移动了多远(例如,delta_x 和 delta_y)我预计我会在 touchstart
或 touchmove
中使用 event.preventDefault() 来控制何时开始滚动。例如,
div.addEventListener("touchstart", function(e) {
touchStart = {
x: e.touches[0].pageX,
y: e.touches[0].pageY
}
}, false);
div.addEventListener("touchmove", function(e) {
touchNow = {
x: e.touches[0].pageX,
y: e.touches[0].pageY
}
var
dx = touchStart.x - touchNow.x,
dy = touchStart.y - touchNow.y;
if ((Math.abs(dx) < 10) && (Math.abs(dy) < 10)) {
// prevent scrolling
e.preventDefault();
} else if (Math.abs(dx) > Math.abs(dy) < 10) {
// moving right/left - slide item
} else {
// moving up/down - allow scrolling
}
}, false);
但是 - 这不起作用。无论您移动多远,列表都从不滚动。
显然 - 我误解了是什么触发了滚动,以及 event.preventDefault() 在这种情况下应该做什么。
那么 - 有什么方法可以实现我所追求的目标吗?
我希望有一个纯 JavaScript 解决方案(这样我就更好地理解了),但是 jQuery 方法就可以了。如果可能的话,我绝对希望避免使用 jQuery 插件/库/框架......
提前致谢!
最佳答案
我不建议重新发明轮子。有许多库支持手势检测。其中,我建议使用 Hammer.js检测触摸事件。
It doesn't have any dependencies, and it's small, only 3.96 kB minified + gzipped!
这一切都是关于处理触摸事件,没有别的。
在您的情况下,Hammer 内置了 swipe
检测。
您可以通过指定来自定义默认的滑动手势:
velocity : 识别前所需的最小速度(单位是 px per ms)
等等。
以下是simple example (Stack Snippet 在模拟触摸事件时似乎有一些问题,fiddle 工作正常):
var myElement = document.getElementById("container");
var hammertime = new Hammer(myElement, {});
hammertime.get('swipe').set({
direction: 2 // 2 stands for left
})
hammertime.on('swipe', function(event) {
event.target.querySelector(".delete").classList.add("show");
});
* {
margin: 0;
padding: 0;
}
#container {
width: 250px;
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: dodgerblue;
}
#list {
height: 100%;
list-style: none;
}
#list li {
position: relative;
box-sizing: border-box;
width: 100%;
height: 50px;
border: 2px solid #fff;
}
#list li span.delete {
display: inline-block;
position: absolute;
left: 250px;
width: 50px;
height: 40px;
line-height: 40px;
margin: 3px;
text-align: center;
background: #fff;
transition: left 0.5s ease-in;
}
#list li span.delete.show {
left: 170px;
}
<script src="http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<div id="container">
<ul id="list">
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
<li class="item"><span class="delete">×</span>
</li>
</ul>
</div>
如果您对了解触摸事件的工作原理而不是完成工作更感兴趣,那么我建议深入了解 Hammer。
有一点 Hammer.js jQuery plugin同样,对于那些离不开 jQuery 的人。
关于javascript - 使用 JavaScript 控制 iOS 网络应用程序中列表的垂直滚动和水平滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20130070/
大家好,我完成了这个基本的 C 程序,它向输入任何给定数字集的用户显示有序集、最小值、最大值、平均值和中值。我遇到的问题是,当我打印数字时,我必须使用诸如“3.2%f”之类的东西来设置标准的精度,我怎
我有这个基于 Python 的服务守护进程,它正在执行大量多路复用 IO(选择)。 从另一个脚本(也是 Python)我想查询这个服务守护进程的状态/信息和/或控制处理(例如暂停它、关闭它、更改一些参
我读到 Fortran 对表达式求值的顺序有严格的规则。对于某些数值算法来说,这一点非常重要。 数值 C 程序如何控制浮点运算的顺序并防止编译器“优化”到不需要的运算顺序,例如将 (a*b)*c 更改
上下文: 整个问题可以概括为我正在尝试复制调用system(或fork)的行为,但在 mpi 环境中。 (事实证明,你不能并行调用system。)这意味着我有一个程序在许多节点上运行,每个节点上有一个
我考虑过控制scanf来接受c中的任何输入。我的概念是等待10秒(或任何其他时间)来接受任何输入。10秒后它将退出并且不再接收任何输入。 int main(){ int a,b,c,d; sca
我正在尝试使用生成器停止 setTimeOut 上的执行流程。我究竟做错了什么?我无法让 console.log 每 1500 毫秒退出一次。我是 node 的新手,如果我在做一件非常愚蠢的事情,请不
我希望我的应用程序的 Activity 堆栈包含同一 Activity 的多个实例,每个实例处理不同的数据。因此,我将让 Activity A 在我的 Activity 堆栈中处理数据 a、b、c 和
我有这个 bash 文件,它向设备询问 OpenSSH 的 IP、密码等。 现在,如果我使用 ssh root@ip,我必须输入密码。这真的很烦人。第二;我不能让我的脚本向它发送命令。 这就是我想要的
我正在尝试测试我有权访问的机器的缓存属性。为此,我正在尝试读取内存并对其计时。我改变工作集大小和步幅访问模式以获得不同的测量值。 代码如下所示: clock1 = get_ticks() for (i
我正在尝试编写一个 makefile 来替换用于构建相当大的应用程序的脚本之一。 当前脚本一次编译一个文件,使用 make 的主要原因是并行化构建过程。使用 make -j 16 我目前在办公室服务器
我正在制作一个小的测试程序,它演示了一个粗糙的控制台界面。 该程序是一个低于标准的典型获取行、响应程序,它甚至不识别“退出”,并希望您通过按 control-c 强制退出。在 Mingw32 上完成。
好的,我有一个 VOIP 电话。我知道电话的 IP 地址和端口,并且可以完全访问电话,我正在使用它通过 SIP 中继调用 SIP 电话。 我基本上想随时查看手机上发生的事情,但我不知道从哪里开始。 如
是否可以指定 CWinApp::WriteProfileString() 使用的应用程序名称? 如果我使用 CWinApp::SetRegistryKey 将我的公司名称设置为“MyCompany”,
我正在尝试用 Python 控制 Tor。我在 stackoverflow 上阅读了其他几个关于这个主题的问题,但没有一个能回答这个问题。 我正在寻找一种方法,以便在命令运行时为您提供“新身份”、新
最近在做一个项目,涉及到iPhone设备和手表传输数据、控制彼此界面跳转,在网上找了很多资料,发现国内的网站这方面介绍的不多,而国外的网站写的也不是很全,所以在这写这篇文章,给大家参考一下,望大神指
我想增加图中值的范围。在示例中,值的范围从 50 到 200。但是,我需要按如下方式分配值:50 75 100 125 150 175 200 并且最好使用 scale_fill_gradientn
我有一个IconButton,当按下时波纹效果是圆形的并且比按钮的面积大,我怎样才能减少点击按钮时波纹效果的大小? IconButton( constraints
我正在使用代码契约(Contract)为我的项目生成附属程序集。基本上它为项目的 MyAssembly.dll 创建一个 MyAssembly.Contracts.dll。这应该放在你的程序集旁边,但
我想使用分面绘制图形,其中面板之间的边缘不同。面板按字母顺序自动排序(按照 ggplot 中的惯例)。一个简单的例子: library(igraph) library(ggraph) g <- mak
我想为我的 Android 应用程序创建一个小部件,以显示有关位置的一些实时详细信息,例如天气。但我想在任何时候允许最多 3 个小部件实例,每个实例都有不同的位置。我不确定该怎么做,也找不到任何信息。
我是一名优秀的程序员,十分优秀!