Sencha touch 在可滚动容器（Sencha 2）内防止旋转木马滚动？

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

• 如果开始垂直移动，则仅滚动容器
• 如果开始水平移动，则仅滚动旋转木马

如果您现在抓取旋转木马，您可以同时向两个方向滚动。示例代码：

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

});

Ext.define（'MyApp.view.MyContainer'{
扩展：“Ext.Container”，
配置：{
可滚动：对，
项目：[
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“abc”
}
]
},
{
xtype:'旋转木马'，
身高：200，
可滚动：false，
项目：[
{
xtype:'标签'，
html:'x'
},
{
xtype:'标签'，
html:'y
y
y
y
y
y
y
y
y'
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:'def'
}
]
}
]
}
});

---

使用Sencha Touch 2.

如果开始水平移动，仅滚动旋转木马

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

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

---

当你垂直滚动时，我还没有弄清楚如何锁定旋转木马。如果我发现了，我会通知您。

如果开始水平移动，请仅滚动旋转木马

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

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

---

当你垂直滚动时，我还没有弄清楚如何锁定旋转木马。如果我发现了，我会告诉你的。

试试这个。它对我很好用

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

Ext.define（'MyApp.view.MyContainer'{
扩展：“Ext.Container”，
配置：{
可滚动：{
方向：“垂直”
},
项目：[
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“abc”
}
]
},
{
xtype:'旋转木马'，
身高：200，
方向：'水平'，
方向锁：对，
项目：[
{
xtype:'标签'，
html:'x'
},
{
xtype:'标签'，
html:'y
y
y
y
y
y
y
y
y'
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:'def'
}
]
}
]
}
});

试试这个。它对我很好用

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

Ext.define（'MyApp.view.MyContainer'{
扩展：“Ext.Container”，
配置：{
可滚动：{
方向：“垂直”
},
项目：[
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:“abc”
}
]
},
{
xtype:'旋转木马'，
身高：200，
方向：'水平'，
方向锁：对，
项目：[
{
xtype:'标签'，
html:'x'
},
{
xtype:'标签'，
html:'y
y
y
y
y
y
y
y
y'
}
]
},
{
xtype:'容器'，
项目：[
{
xtype:'标签'，
html:'def'
}
]
}
]
}
});

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

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

---

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

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