0

我想寻求帮助，因为我找不到任何合适的答案。

我正在开发一个应用程序，它有 2 个模块，一个左侧和一个右侧，我可以通过切换启用/禁用。每一面都有一张图片，下面有一个滑块。滑块有 4 个步骤来改变图片。现在我希望图片有一个淡入淡出动画 onChange。我找不到一个足够接近我的问题的例子。

这是代码：

{
            xtype: 'container',
            name: 'rightContainer',
            flex: 1,
            padding: '2',
            items: [
                {
                    xtype: 'container',
                    id: 'containerr',
                    flex: 1,
                    html: '<img src="boerse_icon1.png" />',
                    margin: 25,
                },
                {
                    xtype: 'container',
                    flex: 1,
                    docked: 'bottom',
                    items: [
                        {
                            xtype: 'sliderfield',
                            id: 'sliderr',
                            disabled: true,
                            value: 0,
                            minValue: 0,
                            maxValue: 3,
                            margin: 25,
                            flex: 1,
                            listeners: {
                                change: function( me, Slider, thumb, newValue, oldValue, eOpts) {
                                    if (newValue == 0) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon1.png" />');
                                    }
                                    if (newValue == 1) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon2.png" />');
                                    }
                                    if (newValue == 2) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon3.png" />');
                                    }
                                    if (newValue == 3) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon4.png" />');
                                    }
                                }
                            }
                        }
                    ]
                }
            ]
        }

这正是正确的容器。我正在运行 Sencha Touch 框架 2.0

TIA

4

2 回答 2

0

你需要做的基本上是：

创建具有以下布局的面板：

layout: {
      type: 'card',
           animation: {
               type: 'fade',
               duration: 2000
           }
       }

然后创建一个带有change事件监听器的滑块：

listeners: {
    change: function(me, Slider, thumb, newValue, oldValue, eOpts) {
        panel.setActiveItem(newValue);                        
    }
}

用项目（图像）填充面板，你就可以开始了。

为此，我整理了一个可用的 Senchafiddle 供您试验： Senchafiddle 示例

希望这可以帮助你！

于 2012-09-27T22:25:37.373 回答
0

可能是这个作品。

            {
                xtype: 'container',
                id: 'containerr',
                showAnimation :'fadeIn',
                flex: 1,
                html: '<img src="boerse_icon1.png" />',
                margin: 25,
            },
于 2012-09-27T10:32:41.587 回答