Sencha Touch 2 Card布局页面切换效果_sencha card 显示第二个-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoguang44/article/details/7839342

本文介绍 Sencha Touch 2 中的多种动画效果，如 Cover、Fade、Flip 等，并提供 TabPanel 动画效果的示例代码。文章还详细解释了如何在 Card 布局中应用这些动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

已知的有：Cover, Fade, Flip, Pop, Reveal, Scroll, Slide,

card布局中貌似cube没有包含在里面。。。。但是在tabpanel确是可以使用

在st2在tabpanel中的代码调用示例：

 xtype: 'tabpanel',
                showAnimation:{
                    type : 'pop'
                },
                layout: {
                    type: 'card',
                    animation: {
                        type : 'pop'
                    }
                },
                //now we specify the tabBar configuration and give it a docked property of bottom
                //this will dock the tabbar of this tabpanel to the bottom
                tabBar: {
                    docked: 'bottom'
                },

                //here we specify the ui of the tabbar to light
                ui: 'light',

                //defaults allow us to add default configuratons for each of the items added into
                //this container. adding scrollable true means that all items in this tabpanel will
                //be scrollable unless otherwise specified in the item configuration
                defaults: {
                    scrollable: true
                },
items: [
                {
                    //each item in a tabpanel requires the title configuration. this is displayed
                    //on the tab for this item
                    title: 'Tab 1',
					
                    //next we give it some simple html
                    items: {

						html: '1',
                        centered: true
                    },

                    //then a custom cls so we can style it
                    cls: 'card1'
                },
                {
                    //title
                    title: 'Tab 2',
					
                    //the items html
                    items: {

						html: '2',
                        centered: true
                    },

                    //custom cls
                    cls: 'card2'
                },
                {
                    //title
                    title: 'Tab 3',
					
                    //the items html
                    items: {

						html: '3',
                        centered: true
                    },

                    //custom cls
                    cls: 'card3'
                }
            ]

在一个容器里定义card布局时设置动画切换代码：

（controller里面定义切换时候的函数）

	showView: function (viewObj, animationObj) {
		var mainView = this.getMainView();
		mainView.animateActiveItem(viewObj, animationObj);
	}

然后：通过controller调用函数设置调用的页面index和效果就能调用了，切换的项目效果示例放在qq群共享了（224711028），有兴趣的童鞋们可以去下载。

P.S.如果cube切换效果遇到不能用的话大家参看这篇文章：http://www.sencha.com/forum/archive/index.php/t-186158.html?s=05b94218754784752b0e79b8c9eda0a9

Ext.fx.layout.card.Cube is commented out in Ext.fx.layout.Card so it's currently not supported. You can try to use it but don't blame us if it doesn't work :)

可能st2只能再等等了，大家可以用st1的cube效果