树组件上的 Flex 4 自定义滚动条

Posted

技术标签:

【中文标题】树组件上的 Flex 4 自定义滚动条【英文标题】:Flex 4 Custom Scroll bar on tree component 【发布时间】:2011-10-23 12:37:10 【问题描述】:

我想自定义 mx|Tree 组件上的滚动条是 Flex 4。 我想模仿这个功能:http://flexponential.com/2009/10/09/changing-the-position-of-the-scroll-bars-in-a-spark-list/

有什么想法或建议吗?

【问题讨论】:

如果有 mx 组件,这将非常困难。我不知道火花树。 你最好找一个Spark List Component,它更容易换肤,你可以使用一个简单的Scroller SkinClass。 【参考方案1】:

您也可以尝试使用带有 css 样式的verticalScrollBarStyleName/horizo​​ntalScrollBarStyleName。但是ofc它缺乏火花皮肤的舒适感。 ;)

【讨论】:

【参考方案2】:

这可以工作,添加你自己的错误检查/样式,但你明白了:

<s:VGroup gap="-1">
        <s:Button  label="Scroll up" click="tree.verticalScrollPosition--" />
        <mx:Tree id="tree" labelField="@label" showRoot="false"  
                 verticalScrollPolicy="off">
            <mx:dataProvider>
                <fx:XML>
                    <root>
                        <node label="Parent 1">
                            <node label="Child 1" />
                            <node label="Child 2">
                                <node label="Grandchild 1" />
                                <node label="Grandchild 2" />
                            </node>
                            <node label="Child 3" />
                            <node label="Child 4" />
                            <node label="Child 5" />
                            <node label="Child 6" />
                            <node label="Child 7" />
                            <node label="Child 8" />
                            <node label="Child 9" />
                        </node>
                    </root>
                </fx:XML>
            </mx:dataProvider>
        </mx:Tree>
        <s:Button  label="Scroll Down" click="tree.verticalScrollPosition++"/>
    </s:VGroup>

【讨论】:

绝对需要错误检查,不是特别优雅,但这正是我想要的。感谢您的建议。

以上是关于树组件上的 Flex 4 自定义滚动条的主要内容,如果未能解决你的问题,请参考以下文章

elementui el-tree组件flex布局出现横向滚动条

Vue自定义滚动条盒子

如何在 Flex 中向 UIComponent 添加滚动条

scroll-view组件bindscroll实例应用:自定义滚动条

带有水平滚动条的 pre/code 元素破坏了 Firefox 上的 flex 布局

Flutter实战自定义滚动条