Sencha Touch/HTML5 Пролистывание события/эффекта слева направо

Я пытаюсь сделать событие/эффект смахивания слева направо в Sencha Touch или HTML5. Итак, если HTML-страница работает на iOS, она должна запустить анимацию, если пользователь коснется и проведет пальцем слева направо по экрану.

Любые идеи, как это можно сделать «легко»?


html swipe sencha-touch
person Tomahawk PPC    schedule 16.03.2011    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Если я правильно вас понял, вы хотите переключать контент, если пользователь проводит пальцем по экрану влево/вправо. Я считаю, что самый простой подход — использовать карусель. Взгляните на пример кухонной раковины Sencha Touch (пользовательский интерфейс -> карусель): 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'
        }]
    }]
});
person Nicodemuz    schedule 19.03.2011
comment
@Richard Лучший способ поблагодарить меня - принять ответ! :) - person Nicodemuz; 25.03.2011

arrow_upward
3
arrow_downward

Вы можете добавить событие смахивания жестом примерно так.

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

Надеюсь, это поможет вам.

person Sanat Kumar Panda    schedule 31.10.2014

arrow_upward
0
arrow_downward

Хм... Итак, в карусели, что, если кто-то хочет зафиксировать это событие смахивания, когда пользователь действительно проводит пальцем по экрану, слева направо или наоборот... и также зафиксировать эти данные, в каком направлении они были смахнуты?

person Krishnan    schedule 26.03.2012
comment
Извините, неважно. Нашел то, что искал: listeners: { el: { 'swipe': function (e, o) { console.log('Yippee! I found it'); } } } - person Krishnan; 26.03.2012