防止可滚动容器（Sencha 2）内的轮播滚动？答案

【问题标题】：Prevent Carousel scroll within scrollable Container (Sencha 2)?防止可滚动容器（Sencha 2）内的轮播滚动？
【发布时间】：2012-07-17 11:14:39
【问题描述】：

我有一个带有页眉、内容（轮播）和页脚的容器。因此，容器本身是可滚动的（垂直），以便能够向下滚动到页脚。轮播可以水平滑动以更改活动项目。我想锁定它只做两件事：

如果开始垂直移动，只滚动容器
如果开始水平移动，只滚动 Carousel

如果您现在抓住 Carousel，您可以同时滚动两种方式。示例代码：

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        scrollable: true,
        items: [
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'abc'
                    }
                ]
            },
            {
                xtype: 'carousel',
                height: 200,
                scrollable: false,
                items: [
                    {
                        xtype: 'label',
                        html: 'x'
                    },
                    {
                        xtype: 'label',
                        html: 'y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y'
                    }
                ]
            },
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'def'
                    }
                ]
            }
        ]
    }

});

使用 Sencha Touch 2。

【问题讨论】：

标签： sencha-touch extjs sencha-touch-2

【解决方案1】：

您可能需要阻止过度滚动。这将有助于防止同时发生垂直滚动和轮播项目更改。在您的可滚动容器中尝试此代码。

 scrollable: {
           directionLock: true,
            direction: 'vertical',
            momentumEasing:  {
             momentum: {
               acceleration: 30,
               friction: 0.5
             },
             bounce: {
                acceleration: 0.0001,
                springTension: 0.9999,
             },
             minVelocity: 3
          },
          outOfBoundRestrictFactor: 0   
        },

【讨论】：

【解决方案2】：

如果开始水平移动，只滚动 Carousel

只需将其添加到容器的配置中即可：

config: {
  scrollable: {
    direction: 'vertical',
    directionLock:true
  }
}

我还没有弄清楚当你垂直滚动时如何锁定轮播。如果我知道了，我会告诉你的。

【讨论】：

【解决方案3】：

试试这个。它对我来说很好用。

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        scrollable: {
            direction: 'vertical'
        },
        items: [
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'abc'
                    }
                ]
            },
            {
                xtype: 'carousel',
                height: 200,
                direction: 'horizontal',
                directionLock: true,
                items: [
                    {
                        xtype: 'label',
                        html: 'x'
                    },
                    {
                        xtype: 'label',
                        html: 'y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y'
                    }
                ]
            },
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'def'
                    }
                ]
            }
        ]
    }
});

【讨论】：