Sencha Touch/HTML5 从左到右滑动事件/效果答案

【问题标题】：Sencha Touch/HTML5 Swipe event/effect from left to rightSencha Touch/HTML5 从左到右滑动事件/效果
【发布时间】：2011-03-16 19:40:15
【问题描述】：

我尝试在 Sencha Touch 或 HTML5 中从左到右执行滑动事件/效果。因此，如果 HTML 页面在 iOS 上运行，那么如果用户触摸 ans 并用手指在屏幕上从左向右移动/滑动，它应该会启动动画。

有什么想法可以“轻松”完成吗？

【问题讨论】：

标签： html sencha-touch swipe

【解决方案1】：

如果我的理解正确，您希望在用户向左/向右滑动屏幕时切换内容。我相信最简单的方法是使用轮播。请查看 Sencha Touch Kitchen Sink 示例（用户界面 -> 轮播）： http://dev.sencha.com/deploy/touch/examples/kitchensink/

以下是来自 Kitcen Sink 的代码示例，演示了轮播的使用：

new Ext.Panel({
    cls: 'cards',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        xtype: 'carousel',
        items: [{
            html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
            cls: 'card card1'
        },
        {
            html: '<p>Clicking on either side of the indicators below</p>',
            cls: 'card card2'
        },
        {
            html: 'Card #3',
            cls: 'card card3'
        }]
    }]
});

【讨论】：

@Richard 感谢我的最好方式就是接受答案！ :)

【解决方案2】：

您可以添加类似这样的手势滑动事件。

tabpanel.element.on('swipe', function(e) {
  if(e.direction === 'left') {
    // left slide event here
  }
  if(e.direction === 'right') {
    // right slide event here
  }
  if(e.direction === 'up') {
    // up slide event here
  }
  if(e.direction === 'down') {
    // down slide event here
  }
}, tabpanel);

希望对您有所帮助。

【讨论】：

【解决方案3】：

嗯...因此，在轮播中，如果想要捕获该滑动事件，当用户实际滑动屏幕时，从左到右或反之亦然...并同时捕获该数据，它的方向是什么被刷了？

【讨论】：

对不起，没关系。找到了我要找的东西：listeners: { el: { 'swipe': function (e, o) { console.log('Yippee! I found it'); } } }