Question

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

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

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

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

谢谢！

Answer 1

Tabbar默认停靠在屏幕底部，所以即使你让它半透明，所有内容都会在它上面，你将无法达到你想要的效果。相反，您可以设置标签栏的底部以将其放置在下方，然后添加一些不透明度，例如.75或.8来尝试＆amp;得到你想要的东西

Answer 2

截至目前，您无法通过CSS和下面的动态内容实现半透明化。如果它是静态图像，你可以这样做。

您可以通过透明度来近似效果。您基本上需要使用容器作为标签栏并使用“position：absolute;”设置样式。并设置底部：0。标签栏容器不应该是列表中的项目，而应该是也包含列表的容器项目。

以下是一个简单示例：https://fiddle.sencha.com/#fiddle/26i

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);
    }
});

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

Sencha Touch 2中的半透明标签栏

2 个答案: