Sencha Touch 2中的半透明標籤欄

我想知道什麼是使標籤欄半透明（iOS7風格）並讓內容在其下滾動的最佳方式。我正在使用標籤面板。思考？Sencha Touch 2中的半透明標籤欄

我試着標籤欄設置爲浮動：真實的，但：1。似乎的TabBar被用於私人用途，但沒有找到漂浮性上 2.在做標籤面板在以下方面：

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

我只是讓標籤欄停靠在上面。思考？

謝謝！

來源

2013-12-11 John Doe

截至目前，您無法通過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); 
    } 
});

誠然，這不是風格很不錯，但你的想法。希望有所幫助。

來源

2013-12-13 23:44:04 Phil

太棒了！謝謝！ –

Tabbar默認停靠在屏幕的底部，所以即使你使它變得半透明，所有的內容都會超出它，你將無法實現你想要的。相反，您可以設置標籤欄的底部，將其放置在下方，然後添加一些不透明度，例如.75或.8以嘗試&獲取所需內容

來源

2013-12-12 11:14:01

Sencha Touch 2中的半透明標籤欄

回答

相關問題