1

ヘッダー、コンテンツ (カルーセル)、フッターを含むコンテナーがあります。そのため、コンテナー自体はスクロール可能 (垂直) であり、フッターまでスクロールできます。カルーセルを水平にスワイプすると、アクティブなアイテムを変更できます。私は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'
                    }
                ]
            }
        ]
    }

});

Sencha Touch 2 を使用。

4

3 に答える 3

2

オーバー スクロールをブロックする必要がある場合があります。これにより、垂直スクロールとカルーセル アイテムの変更が同時に発生するのを防ぐことができます。スクロール可能なコンテナー内でこのコードを試してください。

 scrollable: {
           directionLock: true,
            direction: 'vertical',
            momentumEasing:  {
             momentum: {
               acceleration: 30,
               friction: 0.5
             },
             bounce: {
                acceleration: 0.0001,
                springTension: 0.9999,
             },
             minVelocity: 3
          },
          outOfBoundRestrictFactor: 0   
        },
于 2012-11-27T11:02:18.203 に答える
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'
                    }
                ]
            }
        ]
    }
});
于 2012-07-31T11:18:49.787 に答える
1

横に動き始めたらカルーセルのみスクロール

これをコンテナの構成に追加するだけです：

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

垂直にスクロールしたときにカルーセルをロックする方法がまだわかりません。わかったらお知らせします。

于 2012-07-17T16:13:42.080 に答える