Ios7 Sencha Touch 2中的半透明选项卡栏

我想知道什么是使选项卡栏半透明（iOS7样式）并使内容在其下方滚动的最佳方法。我正在使用一个选项卡面板。想法

我尝试将选项卡栏设置为浮动：true，但： 1.tabBar似乎是供私人使用的，在上面找不到浮动属性 2.在选项卡面板上执行以下操作时：

tabBar: {            
    floating: true
},
tabBarPosition: 'bottom'

我只是让标签栏停靠在顶部。想法

---

谢谢

默认情况下，Tabbar停靠在屏幕底部，因此即使将其设置为半透明，所有内容都将位于其上方，您也无法实现自己的愿望。相反，您可以为选项卡栏设置一个底部，将其放置在下方，然后添加一些不透明度，如.75或.8。从现在开始，您无法通过CSS和下面的动态内容实现半透明。如果是静态图像，你可以这样做

可以使用透明度近似效果。您基本上需要使用一个容器作为选项卡栏，并将其样式设置为“position:absolute；”，并将底部设置为0。选项卡栏容器不应该是列表的一项，而应该是同样具有列表的容器的一项

下面是一个简单的例子：

当然，它的样式不是很好，但你明白了。希望有帮助

Ext.application({
    name : 'Fiddle',

    launch : function() {

        var toolbar = {
            xtype: 'container',
            bottom: 0,
            alias: 'bottomtoolbar',
            layout: 'hbox',
            items: [

                {
                    xtype: 'button',
                    text: 'Option 1',
                    style: 'background: transparent;',
                    iconAlign: 'top',
                    width: 80,
                    height: 60,
                    margin: '0 10 0 10'
                },
                {
                    xtype: 'button',
                    text: 'Option 2',
                    style: 'background: transparent;',
                    iconAlign: 'top',
                    width: 80,
                    height: 60,
                    margin: '0 10 0 10'
                },
                {
                    xtype: 'button',
                    text: 'Option 3',
                    style: 'background: transparent;',
                    iconAlign: 'top',
                    width: 80,
                    height: 60,
                    margin: '0 10 0 10'
                }
            ],
            width: '100%',
            height: 80,
            style: 'position: absolute; background: rgba(255,255,255,0.9);'
        };

        var list = {
            xtype: 'list',
            itemTpl: '{title}',
            items: [
                {
                    // Spacer so end of list is selectable
                    xtype: 'container',
                    height: 80,
                    scrollDock: 'bottom'
                }
            ],
            data: [
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 4' }
            ]
        };

        Ext.Viewport.add(toolbar);
        Ext.Viewport.add(list);
    }
});