如何为列表和内容重新创建 sencha 风格的手势滚动？

Posted 2023-02-26

【中文标题】如何为列表和内容重新创建 sencha 风格的手势滚动？

【英文标题】：how do I recreate the sencha style gesture scroll for lists and content?

【发布时间】：2013-12-16 03:39:00

【问题描述】：

所以...我正在做一个交互设计项目，我想为内容区域创建一个煎茶风格的手势滚动。到目前为止，我所做的方式是将 touchmove/start/end 事件附加到内容区域，它翻译的是内容。它可以在带有 mousemove/up/down 事件的桌面上运行，但它会像触摸一样疯狂地跳来跳去。我不确定出了什么问题.. 这是原型的链接。

**需要 webkit。

http://apps.omorphos.com/gesture-scroll

我认为这是事件响应的问题，但我尝试过但无法确定。非常感谢任何帮助！

【参考方案1】：

所以，我想通了。

我正在做的是将触摸事件附加到列表标签本身..并且，这在带有鼠标事件的桌面上运行良好；但是，通过触摸，目标会发生变化，并且 touchend 无法正常触发。

所以，我所做的，以及我相信 sencha 所做的，......我最初实现了但朝不同的方向发展......有一个绝对定位的元素，透明背景颜色漂浮在元素上方，它将被操纵。所有的触摸事件都将被该 DIV 捕获，然后可以在不丢失事件数据的情况下操作下面的元素。

在新版本中我使用了 HammerJs ...更多信息：http://eightmedia.github.io/hammer.js/ 但我很确定你可以只使用标准事件；但是hammer js的好处是它会将触摸事件转换为鼠标事件以便在浏览器中进行测试，这也意味着使触摸的坐标与鼠标相同，因此您可以通过

访问鼠标事件坐标

e.gesture.touches[0].pageX
e.gesture.touches[0].pageY

这可以让您编写更少的代码。

第 2 部分：

另外...问题的一部分是...您如何单击屏幕下方的内容/组件（例如链接）。

你是怎么做的……你是从事件处理程序中获取坐标并通过这个原生 javascript 函数传递它们……

var a = document.elementFromPoint(x, y);

这将返回 dom 元素。你所要做的就是触发点击/点击事件。

这很好，除了它会选择具有最高 z-index 的元素.. 这就是你的屏幕 obj（捕获所有触摸事件的那个）。所以，你需要做的是，在点击注册后隐藏屏幕，然后在 200ms 后执行这个函数，然后把屏幕带回来捕捉任何事件。

你可以用这个函数做到这一点...

$(theScreen).on('tap', function(e)
    screen.hide();
    var hit = document.elementFromPoint(e.gesture.touches[0].pageX, e.gesture.touches[0].pageY);
    $(hit)[0].tagName !=="A" || $(hit).trigger('click');
    setTimeout(function()screen.show(),300);
);

而且，我就是这样解决的！ 我的代码没有超级注释，但是你可以在下面的链接中找到它：

更新示例： http://apps.omorphos.com/gesture-scroll/v2/

【讨论】：

更新示例：apps.omorphos.com/gesture-scroll/v2 无法使用键盘手势（已在 safari 和 chrome 中测试）

我很久以前就想到了这一点，但我的版本还不如 IScroll，所以我在所有项目中都使用了 IScroll。