Question

我在tabview中设置了一个包含6个选项卡的应用程序。其中2个选项卡是Carousels，其中包含图像。

遇到两个问题：

1：当我在转盘内切换卡片时，动画只能从右到左（下一张幻灯片动画）。但是当从左向右滑动（上一张幻灯片动画）时，只显示上一张图像，没有动画。

2：当我将标签更改为任何其他标签，然后返回到旋转木马时，我需要将其重置为开始位置 - 再次显示第一张图像。

有没有办法解决这个问题？

以下是用于轮播标签的代码：

var Tab1 = {
    id:'Tab1',
    xtype: 'carousel',
    layout: 'card',
    title: 'Product Info',
    iconMask: true,
    iconCls: 'info',
    bufferSize: 5,
    items: [
        { cls: 'card product-info page1' },
        { cls: 'card product-info page2' },
        { cls: 'card product-info page3' },
        { cls: 'card product-info page4' },
        { cls: 'card product-info page5' }
    ],
}

Answer 1

由于Tab1是您的轮播的ID，您需要做的就是为您的选项卡面板添加一个监听器，用于activeItemChange事件并调用执行此操作的函数：

resetCarousel: function() {
    Ext.getCmp('Tab1').setActiveItem(0);
}

这很基本，假设您的选项卡面板中有多个轮播或其他容器，您需要确定哪个选项卡具有特定的轮播以调用重置功能。此外，您可以在侦听器函数中使用该代码。因此，如果您向tabpanel添加了一个侦听器，则可以重置特定容器，如下所示：

onTabChange: function(object, value, oldValue, eOpts) {
    console.log(value); //do this and view the console to see what the values are so you can specify them in your conditions
    if (value == "x") {
        Ext.getCmp('Tab1').setActiveItem(0);
    } else if (value == "y") {
        //do something
    } else {
        //do something
    }
}

Answer 2

通过使用以下代码将侦听器放入我想要重置的每个选项卡来解决此问题：

activate : function() {
    Ext.getCmp('Tab2').setActiveItem(0);
}

更改标签后重置转盘？

2 个答案: