sencha touch 2 中的滚动条指示器可见性

Posted 2023-02-26

【中文标题】sencha touch 2 中的滚动条指示器可见性

【英文标题】：Scroll bar indicator visibility in sencha touch 2

【发布时间】：2012-12-20 05:13:48

【问题描述】：

我正在开发 Sencha touch 2。我有一个标签面板，里面有许多水平放置的标签。我想始终显示水平滚动条，以便用户知道还有更多选项卡。 这是我的带有 tabBar 配置的标签面板。如何使滚动条指示器始终可见？：

Ext.define('Project.view.Result', 
extend: 'Ext.tab.Panel',
id:'searchTab',
    tabBar: 

         scrollable:'horizontal',
         scrollBar:'true',
         docked:'top',
         layout: 
                    pack: 'center',
                 ,

    ,
items:[
                                 
                        title: 'A Result',
                        xtype:'AList'
                    ,
                     
                        title: 'B Result',
                        xtype:'BList' 
                    ,

                                ......
                                ......
                                
                        title: 'Z Result',
                        xtype:'ZList' 
                    
                ]
        );

我用 css 试过这个：

#searchTab .x-scroll-indicator[style] 
opacity: 0.5 !important;

然后滚动条对于每个选项卡下的列表项变得可见。但不适用于标签栏。

【参考方案1】：

你几乎明白了，只需将你的 css 更改为：

.x-tabpanel .x-scroll-indicator 
    opacity: 0.5 !important;

希望对你有帮助:)

【讨论】：

这是一个很好的修复（适用于 Chrome），但滚动条仍然不会一直显示在 android WebView（Jellybean 4.2）上。我认为这是因为对 WebView 的 CSS 支持通常很差。但是，如果您点击并滚动列表，则会出现滚动条（虽然看起来很丑）。适合任何想知道的人。

【参考方案2】：

“Touch 2.3.0 中的新功能，每个指标都有一个自动隐藏配置， 允许你控制它。将 autoHide 设置为 false 会告诉你 指示器不会自动隐藏。您可以在其中使用指标配置 容器或子类上的可滚动配置。”

http://www.sencha.com/blog/top-support-tips-march-2014

Ext.application(
    name: 'Fiddle',

    launch : function() 
        Ext.Viewport.add(
            xtype: 'container',
            html: 'The y scroll indicator will always show, x will hide as autoHide defaults to true',
            scrollable: 
                direction: 'both',
                indicators: 
                    y: 
                        autoHide: false
                    
                
            
        );
    
);

https://fiddle.sencha.com/#fiddle/1u9