将 3 张以上的卡片添加到 sencha-touch 轮播时出现问题

发布于 2024-12-02 21:23:50 字数 1135 浏览 0 评论 0原文

我在 iPhone 应用程序中使用 Sencha Touch。当我使用最多三张卡时，我的轮播效果很好。但一旦我使用四张卡，就会出现一个错误：

第一张和第四张卡重叠*，直到我滑到第二张卡。再次滑回第一张卡片后，第四张卡片消失了。

（重叠=显示第一张和第四张卡的内容。第四张卡在前景）

这是怎么回事？我不明白。还有其他人遇到过这种错误吗？这是我的代码中真正的错误还是错误？

这是我的 js：

Ext.setup({
    onReady: function() {
        // Create a Carousel of Items
        var carousel = new Ext.Carousel({
            defaults: {
                cls: 'card'
            },
            items: [{
                cls: 'tab1',
                html: 'Tab 1'
            },
            {
                cls: 'tab2',
                html: 'Tab 2'
            },
            {
                cls: 'tab3',
                html: 'Tab 3'
            },
            {
                cls: 'tab4',
                html: 'Tab 4'
            }]
        });


        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [carousel]
        });
    }
});

编辑：如果你能得到一个带有 4 个以上选项卡的工作轮播，你就已经证明我做错了。

原文

I am using Sencha Touch in my iPhone app. When I use up to three cards, my carousel works fine. But as soon as I use four cards, there is a bug:

The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.

(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)

What is going on here? I don't understand. Has anyone else met this kinda of error? Is it a real bug or a mistake in my codes?

This is my js:

Ext.setup({
    onReady: function() {
        // Create a Carousel of Items
        var carousel = new Ext.Carousel({
            defaults: {
                cls: 'card'
            },
            items: [{
                cls: 'tab1',
                html: 'Tab 1'
            },
            {
                cls: 'tab2',
                html: 'Tab 2'
            },
            {
                cls: 'tab3',
                html: 'Tab 3'
            },
            {
                cls: 'tab4',
                html: 'Tab 4'
            }]
        });


        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [carousel]
        });
    }
});

EDIT: If you can get a working carousel with 4+ tabs, you would already prove that I have done something wrong.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

久随 2024-12-09 21:23:50

这里有几种可能性：

vbox 的使用可能会让它感到困惑（尽管这不太可能）。考虑将面板配置切换为：
```
new Ext.Panel({
    布局：“适合”，
    项目： 旋转木马
});
```
这可能与我们在 1.x 中看到的类似且稍显晦涩的问题有关。试试这个：
- 打开 resources/scss/application.scss 并将第 23 行 (@include sencha-carousel;) 向下移动 4 行，使其恰好位于 sencha-layout 行之后
- 运行compasscompile来重新编译你的SASS

如果是同样的问题正如我不久前看到的那样（不能保证是这样），这会解决它

Couple of possibilities here:

The use of vbox could be confusing it (though this is unlikely). Consider switching your panel configuration to just say:
```
new Ext.Panel({
    layout: 'fit',
    items: carousel
});
```
This could be related to a similar and slightly obscure issue we'd seen in 1.x. Try this:
- Open resources/scss/application.scss and move line 23 (@include sencha-carousel;) down 4 lines so that it ends up just after the sencha-layout line
- run compass compile to recompile your SASS

If it's the same issue as I saw a while back (no guarantee that it is), this will fix it

回复收藏 0 原文

~没有更多了~