SenchaTouchまたはHTML5で左から右にスワイプイベント/エフェクトを実行しようとしています。したがって、HTMLページがiOSで実行されている場合、ユーザーが画面の左から右に指で移動/スワイプすると、アニメーションが開始されます。
これを「簡単に」行う方法はありますか?
SenchaTouchまたはHTML5で左から右にスワイプイベント/エフェクトを実行しようとしています。したがって、HTMLページがiOSで実行されている場合、ユーザーが画面の左から右に指で移動/スワイプすると、アニメーションが開始されます。
これを「簡単に」行う方法はありますか?
私があなたを正しく理解していれば、ユーザーが画面を左右にスワイプした場合にコンテンツを切り替えたいと考えています。最も簡単な方法は、カルーセルを使用することだと思います。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'
}]
}]
});
このようなジェスチャースワイプイベントを追加できます。
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);
これがお役に立てば幸いです。
うーん... では、カルーセルで、ユーザーが実際に画面を左から右に、またはその逆にスワイプしたときに、そのスワイプイベントをキャプチャしたい場合はどうすればよいでしょうか? また、どの方向にスワイプされたかというデータもキャプチャします。