当前位置：文江博客话题详情

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

发布于 2024-10-23 21:53:21 字数 134 浏览 6 评论 0原文

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

有什么想法可以“轻松”地做到这一点吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉南桥 2024-10-30 21:53:21

如果我理解正确的话，如果用户向左/向右滑动屏幕，您想要切换内容。我相信最简单的方法是使用轮播。请看一下 Sencha Touch 厨房水槽示例（用户界面 -> 旋转木马）：
http://dev.sencha.com/deploy/touch/examples/kitchensink/

下面是取自 Kitcen Sink 的代码示例，演示了 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'
        }]
    }]
});

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

回复收藏 0 原文

っ左 2024-10-30 21:53:21

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

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

希望这对您有帮助。

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.

回复收藏 0 原文