Question

我创建了一个＆＃34;触摸列表＆＃34; EmberJS的组件，基于余烬收集，混合了余烬手势：

import RecognizerMixin from 'ember-gestures/mixins/recognizers';

export default Ember.Component.extend(RecognizerMixin, {
  recognizers: 'tap press swipe',
...
  swipeLeft(event) {
...
    event.preventDefault();
    event.stopPropagation();

  },
...

我的test app有两个面板，一个用于列表，另一个用于项目详细信息。（GitHub上有一个过时的source code。）在640px或更宽的屏幕上，面板的容器被设置为视口宽度，并且所有都是良好的 - 水平滑动被识别，并且不要＃39}。 ; t触发滚动。

在屏幕639px或更窄的屏幕上，我将容器设置为视口宽度的两倍，并将每个面板设置为视口宽度。列表标题或详细信息面板上的水平滑动按预期滚动。

问题是触摸屏设备上列表项的水平滑动。它们被识别为手势，并由列表项处理，但它们也会导致水平滚动！如上所示，我致电event.preventDefault();和event.stopPropagation();，但这并没有帮助。

如何防止滑动导致水平滚动？

Answer 1

我的解决方案是更改布局，以便不会发生水平滚动。现在，使用transform: translateX(-100%);

实现面板的水平移动

我已经提升到一个新的混乱程度： How do I set a class on a parent element when a route is the first one loaded?

滑动由ember-gestures处理，但也滚动

1 个答案: