我有一个带有标题,内容(Carousel)和页脚的Container。容器本身就是可滚动(垂直)的,以便能够向下滚动到页脚。可以水平滑动转盘以更改活动项目。我想锁定它只做两件事:
如果你现在抓住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。
答案 0 :(得分:2)
您可能需要阻止过度滚动。这将有助于防止同时发生垂直滚动和轮播项目更改。请在容器的可滚动内部尝试此代码。
scrollable: {
directionLock: true,
direction: 'vertical',
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 3
},
outOfBoundRestrictFactor: 0
},
答案 1 :(得分:1)
如果开始水平移动,则只滚动轮播
只需将其添加到容器的配置中:
config: {
scrollable: {
direction: 'vertical',
directionLock:true
}
}
当你垂直滚动时,我仍然没有想出如何锁定旋转木马。如果我发现了,我会告诉你的。
答案 2 :(得分:1)
试试这个。我的工作正常。
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'
}
]
}
]
}
});