gpt4 book ai didi

javascript - 使用 JavaScript 控制 iOS 网络应用程序中列表的垂直滚动和水平滑动

转载 作者:可可西里 更新时间:2023-11-01 03:31:44 25 4
gpt4 key购买 nike

我正在创建一个专门针对手机(主要是 iPhone,但即将推出 Android 和 WP...)的网络应用程序。

其中一个屏幕包含一个滚动的项目列表。我希望列表的行为类似于内置的 iOS 邮件应用程序。

换句话说...

  1. 如果用户触摸列表并向上或向下移动,列表将垂直滚动。
  2. 如果用户向上或向下滑动,列表将以自然动量垂直滚动
  3. 如果用户触摸列表并向左移动 - 特定项目向左滑动,显示删除按钮。
  4. 重要 - 列表应滚动项目应滑动,但绝不能两者都

所以 - 弄清楚用户的意图很重要,这意味着我可能需要阻止任何响应,直到我弄清楚用户是垂直还是水平移动她的手指。

只需在列表容器上设置这些 CSS 样式...

overflow-y: auto;
-webkit-overflow-scrolling: touch;

...我得到上面的#1 和#2。所以,我需要弄清楚如何实现 #3。

我的第一个想法是实现这样的东西(伪代码)...

  1. 在列表容器上创建一个touchstart 事件监听器。在回调中,存储用户开始触摸位置的 x 坐标和 y 坐标。
  2. 在列表容器上创建一个touchmove 事件监听器。在回调中,计算出用户的手指移动了多远(例如,delta_x 和 delta_y)
  3. 如果 delta_x AND delta_y 都小于 10 像素 - 不要做任何事情(不要滚动列表或滑动项目) - 因为我们还没有尚未弄清楚用户是打算向上/向下移动还是向左/向右移动。
  4. 如果 EITHER delta_x OR delta_y 超过 10 像素 - 我们可以假设用户已经移动得足够远以表达她的意图。如果 delta_y > delta_x,假设她正在向上/向下移动,并允许列表滚动,但不要滑动项目。如果 delta_x > delta_y,假设她在向左/向右移动,那么我们应该允许项目滑动,但不允许列表滚动。

我预计我会在 touchstarttouchmove 中使用 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检测。

您可以通过指定来自定义默认的滑动手势:

  • 方向:您想要检测滑动手势的方向( more info )
  • 阈值:识别前所需的最小距离
  • 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">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
<li class="item"><span class="delete">&#215;</span>
</li>
</ul>
</div>


如果您对了解触摸事件的工作原理而不是完成工作更感兴趣,那么我建议深入了解 Hammer。


有一点 Hammer.js jQuery plugin同样,对于那些离不开 jQuery 的人。

关于javascript - 使用 JavaScript 控制 iOS 网络应用程序中列表的垂直滚动和水平滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20130070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com