Sencha Touch/HTML5 Swipe event/effect from left to right

问题

I try to do a swipe event/effect from left to right in Sencha Touch or HTML5. So if the HTML page runs on iOS then it should start an animation if the user touche ans moves/swipe with the finger from the left to the right on the screen.

Any ideas how this can be done 'easily'?

回答1:

If I understood you correctly, you want to switch content if the user swipes the screen to either left/right. I believe the easiest approach is to use a Carousel. Please have a look at the Sencha Touch Kitchen Sink example (User Interface -> Carousel): http://dev.sencha.com/deploy/touch/examples/kitchensink/

Below is a code example taken from the Kitcen Sink that demonstrates the use of a Carousel:

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'
        }]
    }]
});

回答2:

You can add gesture swipe event something like this.

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);

Hope this help you.

回答3:

Hmm... So, in a carousel, what if one wants to capture that swipe event, when a user actually swipes the screen, from left to right or viceversa... and capture that data as well, which direction it was swiped?

来源：https://stackoverflow.com/questions/5330825/sencha-touch-html5-swipe-event-effect-from-left-to-right